tree shaking,这个还是一个比较重要的一个东西吧,可以大大的优化你的项目。 git仓库:webpack-demo
tree shaking
翻译一下就是摇树罗,摇树的时候就会把不必要的枯枝烂叶给摇下来,同理,到代码中,tree shaking
就是把没有用到的代码shaking掉。tree-shaking
只有使用es6的模块化规范才有效,如果你使用commonJs
模块化规范是搞不了tree-shaking
的,为什么?因为
ES6
模块是运行时加载(静态加载),即可以在编译时就完成模块加载,使得编译时就能确定模块的依赖关系,可以进行可靠的静态分析,这就是tree shaking
的基础。 而CommonsJs
必须在跑起来运行的时候才能确定依赖关系,所以与不能tree-shaking
。 -- 参考阮大神的讲解-->Module 的语法 概述
tree-shaking
的一个具体的效果,那么你需要在mode:development
中,因为在生产环境的时候,webpack
会自动帮我们做tree-shaking
。mode: 'development',
optimization: {
usedExports: true,
},
package.json
中设置下sideEffects
,也可以是一个数组如"sideEffects": ["*.css"]
就表示所有引入的css
文件不做tree-shaking
。{
"name": "webpack-easy-demo",
+ "sideEffects": false,
}
Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the documentation for more details). 要确保没有编译器把es6的语法转换为require这种commonJs的这种写法,但是babel的这个@babel/preset-env配置的默认行为就是如此。
babel
将es6
的import/expot
转为commonJs
规范的require
写法,我们需要这样:{
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: { version: 3, proposals: true },
+ // 禁止将import/export转为require写法
+ modules: false
}
]
]
}
}
mode
设置为production
;sideEffects
;bable
配置modules: false
。tree-shaking
有四点:
import/export
);import/expot
转为commonJs规范的require
写法;(所以我们需要将@babel/preset-env
的modules
参数设置为false
)package.json
中添加sideEffects
告诉webpack哪些是不用tree-shaking
的文件。production
,因为production
会自动使用terser-webpack-plugin
这个插件来做一些压缩、无用代码的剔除实现tree-shaking
。