Question

我设置了React + Webpack项目。构建一个初始包需要60秒，并且需要1秒来增加更改但我甚至还没有申请代码！似乎node_modules包非常昂贵。我尝试使用常见的块进行拆分，但它没有提高性能。

如何才能使Webpack捆绑node_modules一次，甚至不注意这个目录的变化？

Answer 1

如果这是一个问题，您不需要在项目中捆绑外部依赖项。您可以将它们添加为外部依赖项。当然，为此，您应该将脚本添加到页面中。

我们假设您将react和react-dom脚本添加到您的页面，您可以在webpack配置文件中添加：

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }
}

这告诉webpack每次需要时（＆＃39;反应＆＃39;）或webpack将返回一个名为React的全局变量。如果您需要（＆＃39; react-dom＆＃39;）

，也是如此

对于每个加载器，您应该包含所需的文件或排除您不需要的文件。

这是一个不包含node_modules的示例：

{
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: './src',
        loader: 'babel'
      }
    ]
  }
}

甚至更高效，您可以只包含所需的文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style type="text/css">
    body{background-color: #ff0000}
</style>
<script type="text/javascript">
    alert(0)
</script>
</head>

<body>
Content of the document......
</body>

</html>

Webpack：拆分供应商和应用程序代码

1 个答案: