抽离公共代码

学习视频：抽离公共代码【Webpack面试题】

要抽离的代码

1.公共模块

公共模块的代码不需要重复打包，单独抽离成一个【公共模块】的文件，直接引用即可，比如一些utils代码

2.第三方模块代码

第三方模块的代码一般不会轻易改变，不需要在业务代码改变之后再重新打包，单独抽离成一个【第三方模块】的文件，然后引用即可比如loadsh

实现

一般在生产环境，修改 生成文件的配置

optimization: {
    splitChunks:{
        // all 对同步、异步代码都做代码分割
        // async 只对异步代码做代码分割
        // initial 只对同步代码做分割
        // 同步代码 inport loadsh from 'loadsh'
        // 异步代码 import('loadsh')
        
        chunks: 'all',
        cacheGroups: {
            // 第三方模块
            vendor: {
                name: 'vendor',
                // 对于像loadsh可能被判定为公共模块，也可能被判定为第三分模块，设置第三方模块的优先级高于公共模块，就可以被优先检测
                priority: 1,
                // 检测方法，通过是否来自node_modules来判断的
                test: /node_modules/,
                // 为了看到代码分割的效果，把值设置到最小
                minsize: 0,
                minChunks: 1
            },
            // 公共模块
            common: {
                // 每个组的名字
                name: 'common',
                // 优先级，优先级越高，越先检测处理, 
                priority: 0,
                // 实际开发中，可以写成5*1024,即5kb
                minsize: 0,
                // 检测模块被引用了几次
                // 对于第三方模块，引用1次就应该单独打包
                // 对于公共模块，引用2次以上就该单独打包
                minChunks: 2
            }
        }
    }
}