Webpack之优化

单独打包 runtime

什么是runtime？为了让某个东西能够运行而提供的代码叫runtime，这里指为了能让IE运行而提供的代码。

通过单独打包runtime，在代码和依赖没有变化的情况下，此后即可不再被重复打包，节省时间。

webpack.config.js

module.exports = {
  optimization: {
    runtimeChunk: 'single',
  },
}

单独打包 node 依赖

webpack.config.js

module.exports = {
  optimization: {
    moduleIds: 'deterministic', // 固定moduleIds,让node_modules里面的文件id不会因为删除而发生变化
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          minSize: 0, /* 如果不写 0，例如 React 文件尺寸太小，会直接跳过 */
          test: /[\\/]node_modules[\\/]/, // 为了匹配 /node_modules/ 或 \node_modules\
          name: 'vendors', // 文件名
          chunks: 'all',  // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
          // 这三行的整体意思就是把两种加载方式的来自 node_modules 目录的文件打包为 vendors.xxx.js
          // 其中 vendors 是第三方的意思
        },
      },
    },
  },
}

多页面配置

webpack.config.js

module.exports = {
  mode,
  entry: {
    // 举例，打包两个页面
    main: './src/index.js',  // A
    admin: './src/admin.js'  // B
  },
  plugins: [
    new ESLintPlugin({
      extensions: ['.js', '.jsx', '.ts', '.tsx'] // 不加 .jsx 就不会检查 jsx 文件了
    }),
    mode === 'production' && new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
    new HtmlWebpackPlugin({ // A
      filename: 'index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({ // B
      filename: 'admin.html',
      chunks: ['admin']
    })
  ].filter(Boolean),
}

提取公共模块

webpack.config.js

module.exports = {
  optimization: {
    moduleIds: 'deterministic', // 固定moduleIds,让node_modules里面的文件id不会因为删除而发生变化
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          priority: 10, // 优先级，优先node_nodules里面的文件公共部分不管
          minSize: 0, /* 如果不写 0，例如 React 文件尺寸太小，会直接跳过 */
          test: /[\\/]node_modules[\\/]/, // 为了匹配 /node_modules/ 或 \node_modules\
          name: 'vendors', // 文件名
          chunks: 'all',  // all 表示同步加载和异步加载，async 表示异步加载，initial 表示同步加载
          // 这三行的整体意思就是把两种加载方式的来自 node_modules 目录的文件打包为 vendors.xxx.js
          // 其中 vendors 是第三方的意思
        },
        common: { // 公共部分
          priority: 5, // 优先级
          minSize: 0, // 无论多小都会被处理
          minChunks: 2, // 被至少两个文件引用就公用
          chunks: 'all', // 无论是同步加载还是异步加载都需要
          name: 'common' // 公共文件名字
        }
      },
    },
  },
}

总结

一句话总结为：Code Split:

1. runtime
2. node_modules
3. common
4. self