1

我正在使用 webpack-bundle-analyzer 来识别可能需要优化的包。我的 webpack 配置不包括node_modules

webpack.config

  config.module = {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: [
        /node_modules/,
        /firebase-functions/,
        /tests/
      ],
      use: {
        loader: 'babel-loader'
      }
    },
    ...
   }]
 }

当我查看我的捆绑包的表示时，我仍然可以看到node_modules，这是否意味着node_modules包含在我的捆绑包中？

我首先运行yarn run build:stats生成compilation-stats.json然后yarn run analyse

包.json

  "scripts": {
    "build:prod": "cross-env NODE_ENV=production webpack -p --env production",
    "dev-server": "cross-env NODE_ENV=development ANALYSE_BUNDLE=no webpack-dev-server --host 127.0.0.1 --port 8080",
    "dev-server-analyse": "cross-env NODE_ENV=development ANALYSE_BUNDLE=yes webpack-dev-server --host 127.0.0.1 --port 8080",
    "build:stats": "cross-env NODE_ENV=production webpack --profile --json --env=production > compilation-stats.json",
    "analyse": "webpack-bundle-analyzer compilation-stats.json dist",

我也试图指示不包括node_modules

webpack.config

new BundleAnalyzerPlugin({
  excludeAssets: ['node_modules'],
  statsOptions: {
    exclude: /node_modules/
  }
})

webpack-bundle-analyzer 的结果 在此处输入图像描述 那么，是node_modules包含在我的包中还是我只是做错了什么？

亲切的问候/K

4

1 回答 1

1

是的。WebPack 规则只是描述要使用的加载器链。以任何方式包含纯 JS 代码。您可以从捆绑包中排除供应商代码的原因有很多，例如：

  • 重建时间优化
  • 最佳缓存
  • ETC

WebPack 提供了不同的方法来做到这一点：

WebPack 具有默认的块优化器。在大多数情况下，这足以获得良好的结果。仅当您遇到一些实际问题并了解您想要韭菜时，您才应该进行其他一些手动优化。

于 2020-02-03T09:19:41.960 回答