Tree-shaking

作用：自动移除未使用的代码成员
在 optimization 下配置

module.exports = {
 optimization: {
   usedExports: true,// 打包结果中只导出被使用的成员
   minimize: true,    // 压缩打包结果（移除未使用的成员）
 },
};

生产模式下，webpack 自动开启 tree-shaking 功能，并自动压缩代码。

合并模块

optimization: {
  concatenateModules: true
}

作用：将所有函数（模块）合并到单一模块中。这样既提升运行效率，又减少代码体积。
普通打包只是一个函数对应一个模块。

Code splitting

项目刚启动时，并不是所有模块都是必须的。更合理的方案是按规则分离到多个bundle 中，然后按需加载。

code splitting 表示代码分割，它有两种实现方案：

1. 动态导入
2. 多入口打包

动态导入：
动态导入一般适用于单页面应用，根据路由表来划分。
ES Modules 的动态导入特性，会把模块自动提取到单独的 bundle 中，从而实现分包。

{
  name: '观影红包隐藏配置',
  path: '/activity/viewing-red-packet',
  component: lazy(() => import(/* webpackChunkName: "activity" */'@src/views/activity/viewingRedPacket'))
}

import 函数返回一个 Promise 对象，通过魔法注释可以给 chunk 起名字，格式为/* webpackChunkName: '' */

mini-css-extract-plugin

一般使用 style-loader 处理 css 文件的打包，这种方式会使 css 代码内嵌到 js 代码中。
mini-css-extract-plugin 这个插件会把 css 提取出来作为单独的文件，以减少 js 包的大小。

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: true
            }
          }
        ]
      },
    ]
},
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash:8].css'
  }),
]

optimize-css-assets-webpack-plugin

对提取出来的 css 文件进行压缩。

plugins: [
  new OptimizeCSSAssetsPlugin(),
]