供应商一直都非常庞大 - 应该采取哪些措施来减少它？

Question

我正在捆绑我的供应商依赖关系：

module.exports = {
  entry: {
    vendor: [
      'react',
      'react-dom',
      'react-router',
      'velocity-react',
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
      filename: 'vendor.js',
    }),
  ]
}

尽管存在这些依赖关系，但webpack始终表示我的供应商块很大。

我不确定这是否正确处理 - 有没有办法减少这个捆绑的大小？应该将诸如react之类的依赖关系分解为它们自己的单独块吗？

Answer 1

我们通常做的是在我们的webpack中将外部库标记为“外部” - 这使我们的核心库独立于第三方依赖项。这是一个例子： https://github.com/flexicious/react-redux-datagrid/blob/master/config/webpack.config.js

webpackConfig.externals = {
          "react": "React",
        "react-dom": "ReactDOM",
        "flexicious-react-datagrid":"flexiciousNmsp"
}

Answer 2

您应该在启用缩小功能的情况下生成捆绑包（基本上为生产运行webpack -p）。

此外，您应该将全局变量process.env.NODE_ENV设置为production，以便在React模块中消除死代码。见这里：

http://survivejs.com/webpack/optimizing-build/setting-environment-variables/#setting-process-env-node_env-

如果你最终在你的网络服务器上启用了gzip压缩，它应该会低得多。

例如，请参阅此处最新的React的CDN版本，缩小：

https://unpkg.com/react@15.4.2/dist/react.min.js https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js

打开浏览器开发工具，网络检查器，看看它们各自约为30Kb（gzip）。