webpack抽离公共代码和第三方代码

1、为什么要抽离公共代码

在多入口文件的情况下,如果在每个入口文件中都引入了相同的模块,那么打包时,就会将这个模块重复打包进去,这是没有必要的。

2、为什么要抽离第三方代码

每次更改了自己的代码,重新打包,生成了新的hash文件名,而第三方包(如lodash)并没有改变,不需要重新打包。

3、配置optimization下的splitChunks项

开发环境下没有必要抽离
webpack.common.js和webpack.dev.js没有改动
webpack.prod.js改动

optimization和plugins平级

1、chunks共有三个选项值

一般情况下用all
chunk理解为是一段代码(代码块)

  1. initial 入口 chunk,对于异步导入的文件不处理
  2. async 异步 chunk,只对异步导入的文件处理
  3. all 全部 chunk,同步、异步都处理
    optimization: {

        // 分割代码块
        splitChunks: {
            chunks: 'all',
            
            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高,优先抽离,重要!!!
                    test: /node_modules/,
                    minSize: 0,  // 大小限制,最小多大,就抽离出来,为了防止一些比较小的模块被单独抽离出来,反而浪费资源
                    minChunks: 1  // 最少复用过几次,就抽离出来
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }

4、配置HtmlWebpackPlugin插件

chunks项,是一个数组,表示这个入口下要引用哪些chunk,chunk的名字就是上面抽离时定义的name

  plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
            chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other', 'common']  // 考虑代码分割
        })
    ]
上一篇:vue-cli 4 打包优化


下一篇:基于vue-simple-uploader 实现大文件分片上传(一)