Webpack中的高级特性

自从webpack4以后，官方帮我们集成了很多特性，比如在生产模式下代码压缩自动开启等，这篇文章我们一起来探讨一下webpack给我们提供的高级特性助力开发。

探索webpack的高级特性

特性：treeShaking

顾名思义treeShaking，就是摇树，那么体现在代码模块里面就是摇掉那些没有被外部成员引用的代码，指的注意的是在生产环境下treeShaking会自动开启。

treeShaking初体验

比如我们在代码中引入lodash库，我们只用到了once方法，那关于lodash其他的功能模块，在生产环境下打包，并不会输出到bundle.js文件里面，比如我们在bundle.js里面去找lodash的一个方法debounce，他是完全可以找得到的。

delelopment模式下打包的bundle.js

production模式下打包的bundle.js

在这里你可能会说了production模式下会开启n多插件，处理打包结果，怎么就能说明是treeShaking做的呢，确实这种做法不能说明是treeShaking做的，我们可以把mode设置为none再试一下，不过这里需要我们手动去开启treeShaking，开启的方式如下。

// webpack.config.js
module.exports = {
   
    ...
    optimization: {
   
        usedExports: true, // 只导出外部成员引用模块
        // 此属性用于模块导入合并，因为单独的模块导入要使用_webpack_require_函数。
        // 此属性就是可以利用_webpack_require_一次性导入所有模块，也叫作用域提升。
        concatenateModules: true, 
        minimize: true, // 开启代码压缩
    }
    ...
}

none模式下打包的bundle.js

所以none模式下，打包的结果依然如此。

扩展

因为treeShaking是依赖于ESM的，如果项目中有配合使用babel-loader那么treeShaking是不是会失效呢？我们可以在配置文件里面添加babel-loader来辅以测试。

// 安装
npm i babel-loader @babel/core @babel/preset-env -D
// webpack.config.js
module.exports = {
   
    ...
    module:[
        {
   
            test:/\.js$/,
            use:{
   
                loader:'babel-loader',
                options:{
   
                    presets:[
                        ['@babel/preset-env']
                    ]
                }
            }
        }
    ]
}

文件效果

我们可以看到没有使用的代码，依然是被移除掉了。

原因分析

因为babel-loader禁用了对ESM转化插件，所以经过babel-loader处理生成的依旧是ESM代码，如果你想使用代码转换功能，那你就需要像下面这样配置，只不过这样treeShaking就会失效了。

// 安装
npm i babel-loader @babel/core @babel/preset-env -D
// webpack.config.js
module.exports = {
   
    ...
    module:{
   
        rules:[
            {
   
                test:/\.js$/,
                use:{
   
                    loader:'babel-loader',
                    options:{
   
                        presets:[
                            // 强制使用commonjs转换
                            ['@babel/preset-env', {
   modules: 'commonjs'}]
                        ]
                    }
                }
            }
        ]
    }
}

那么treeShaking失效了，应该怎么办？不要怕，即使失效了还会有其他插件提供了类似treeShaking功能，比如代码压缩。

特性: sideEffect

sideEffect表示的意思就是副作用，理解起来并不难，比如外部成员引用了当前模块，那么当前模块肯定是不会被treeShaking的，如果在当前模块里面写了冗余的代码，那么sideEffect就是去除这些冗