javascript - 对于 vendor 来说， bundle 始终非常大——应该采取什么措施来减少它？

Question

我像这样捆绑我的 vendor 依赖项:

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

尽管有这些依赖项，但 webpack 始终表示我的 vendor block 很大。

我不太确定这是否得到正确处理——有没有办法减少这个包的大小？是否应该将诸如 React 之类的依赖项分解为自己的单独 block ？

Answer 1

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

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