Webpack在捆中重复包装

Question

以下是包分析器的输出：

​

​

正如您所看到的，包作为react dom，jquery和mobx都在shell包和供应商包中。是否有可能只将它们放在供应商包中？

UPDATE这里是配置文件：

entry: {
    shell: './src/shell.ts',
    vendor: [
      'jquery',
      'react',
      'react-dom',
      'react-router',
      'mobx',
      'mobx-react',
      'toastr',
      'styled-components',
    ],
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name]bundle.js?[hash:8]',
    publicPath: '/',
  },
  devtool: PROD ? false : 'source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.json'],
    modules: ['node_modules'],
  },
  optimization: {
    minimize: !!PROD,
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new ExtractTextPlugin('[name].css?[hash:8]', {
      allChunks: true,
      disable: !PROD,
    }),
    new HtmlWebpackPlugin({
      chunksSortMode: 'dependency',
      template: './src/index.tpl.html',
    }),
    new BundleAnalyzerPlugin(),
  ],

Answer 1

您可以使用node_modules优化webpack设置将开始从splitChunks文件夹中开始的所有供应商代码拆分到单个供应商包文件中。

首先，从vendor中删除entry。

然后，将以下代码添加到config文件中：

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/ ,
                name: 'vendor' ,
                chunks: 'all' ,
                enforce: true ,
            }
        }
    }
}

Answer 2

使用entry手动拆分代码，这有一些缺陷，例如：

如果入口块之间有任何重复的模块，它们将包含在两个包中。

您可以使用Entry dependencies或SplitChunksPlugin来防止这种情况。

下面是Entry dependencies的一个示例

entry: {
    shell: {import: './src/shell.ts', dependOn: 'vendor'},
    vendor: [
      'jquery',
      'react',
      'react-dom',
      'react-router',
      'mobx',
      'mobx-react',
      'toastr',
      'styled-components',
    ],
  },

由于要在同一个HTML页面中使用两个入口点，请记住启用optimization.runtimeChunk: 'single'。

在webpack代码分裂指南上有详细的解释，您也可以在那里阅读。