webpack的打包加载优化

发表于 | 分类于

提取公共代码，项目中会引用很多重复的代码，每个页面都把这些公共代码加载进去会导致一些问题，比如说

  • 重复加载资源，导致资源浪费
  • 每个页面打开时间长（用户体验差）

解决的方向：提取公共代码，一次加载完成所有的公共代码，打开第二个页面的时候，无须再次加载而浪费资源。

splitChunks

模式mode

mode = none/development/production

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  mode: 'production',
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                element: {
                    test: /[\\/]node_modules[\\/]element-ui[\\/]/
                }
            }
        }
    },
};

1
2
3
4
5
6
7
8
9
SplitChunkPlugin 分块打包
optimization: {
  splitChunks: {
    automaticNameDelimiter : '~' 生成名称的对应分隔符，eg. vendors~main.js,
    chunks: all/async/initial all：异步与非异步之间也可以共享块；
  }
}

CleanWebpackPlugin 清除文件