目录

• optimization 配置项

---

Webpack配置

• app.js： 业务代码
• runtime.js：webpack的引导代码
• vendor.js: npm引入的js包代码

optimization 配置项

optimization 配置选项用于优化打包结果。用来自定义一些优化打包策略

• minimizer：配置使用的压缩工具。常用的压缩工具有 UglifyJS、TerserJS 和 CSSMinimizerPlugin 等。

optimization: {
  minimizer: [
    new TerserJSPlugin(),
    new OptimizeCSSAssetsPlugin()
  ]
}

• splitChunks： 配置如何将打包后的代码拆分为多个文件，以便实现按需加载。

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    //指定一个 chunk 的最大大小，超过这个大小将自动进行分割。
    maxSize: 0,
    //指定一个模块被使用的最小次数才会被抽取出来形成单独的 chunk。
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    //指定如何根据不同的模块抽取出不同的 chunk，例如将第三方库抽取成单独的 chunk。
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
}

• runtimeChunk：配置为每个入口添加一个额外的 chunk，用于存放公共代码和运行时代码。该选项可以有效减少打包后的文件大小，提高网站性能。

optimization: {
  runtimeChunk: 'single'
}

• usedExports：开启 Tree Shaking 功能，用于删除未被使用的代码。

optimization: {
  usedExports: true
}

• moduleIds：指定如何生成模块 ID，默认为自增的数字，可以使用 named 选项将 ID 转换为可读性更好的名称。

module.exports = {
  optimization: {
    moduleIds: 'named', // 将模块 ID 转换为可读性更好的名称
  },
};