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
。
示例代码可以直接看官网的,大概就这么几个配置:
设置usedExports为true
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
。根据官网的conclusion总结,开启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
。这块内容有点东西啊,也不知道我理解的对不对,看看别人的文章吧: