webpack 提取公共js代码 与js tree-shaking区别

解析

首先提取公共js代码块 是针对于多入口的项目配置

配置如下：

自定义的js代码块

name: 指定打包出来文件的名称

chunks：查找范围

minSize:1 打包文件的大小

minChunks: 指明模块被引用多少次为公共模块

priority：1 指明优先级  当有多个公共模块时候 

 output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name][hash:3].bundle.js',
        //将公共 js单独提取到该输出文件 其他模块将不再包含这里面的内容
        chunkFilename: '[name][hash:3].js'
    },

optimization: {
        splitChunks: {
            cacheGroups: {
                common: {
                    chunks: 'all',
                    minSize: 1,
                    // minChunks: 2,
                    name: 'common',
                    priority: 2,
                    test: /\.js$/
                }
            }
        },
     
    },

对于引用第三方软件库时

配置如下

test  正则指明打包哪一个第三方库

两者区别：

 

首先tree-shaking来讲针对于某一个js文件A引用了B文件  B文件引用了C文件展示的是纵向引用

如同作用域链一样webpack自身的js-tree-shaing不具备作用域筛选功能 .如图A文件引用了a方法

npm run dev  模式下 不具备shaking功能

npm run prod 模式下  会打包出a 、c、d方法  不具备作用域筛选功能 加入要去除c、d深度tree-shaking

深度tree-shaking只是不会打包涉及作用域之外的代码