webpack DLL分包总结

package加一行执行分包的命令

    "dll": "webpack --config=webpack.dll.config.js",

需要有一个dll分包配置文件 webpack.dll.config.js

` const webpack = require('webpack'); const path = require('path');

module.exports = {
  entry: {
   // 可以放置多个
    vendors: ['react-dom'],  // 放置你需要抽离的依赖
  },
  output: {
    path: path.join(__dirname, 'dll'), // 存放动态链接库的目录
    filename: '[name].dll.js',       // 动态链接库的名称，如'vendors.dll.js'
    library: '[name]_library',       // 动态链接库输出的文件名
  },
  plugins: [
    // dll输出文件*.manifest.json *.js
    new webpack.DllPlugin({
      name: '[name]_library',        // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      path: path.join(__dirname, 'dll', '[name].manifest.json'),     // 描述动态链接库文件的 manifest.json 文件输出时的文件名称(路径)
      context: __dirname, // 根据实际路径自己配置
      entryOnly: false
    }),
  ],
};

`

修改webpack.config.js

        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: path.join(__dirname, 'dll', 'vendors.manifest.json'),  // 只需要这个映射json即可
        }),
        
        // 将打包出来的js注入到html中
        new AddAssetHtmlPlugin({
            filepath: path.resolve(`./dll/vendors.dll.js`),
            includeSourcemap: false,
        }),

查看包大小的插件

    new BundleAnalyzerPlugin(),
    new SpeedMeasureWebpackPlugin(),