16、webpack从0到1-tree shaking
tree shaking,这个还是一个比较重要的一个东西吧,可以大大的优化你的项目。
git仓库:webpack-demo
1、是什么?
我们首先从字面意思上来了解一下,
tree shaking
翻译一下就是摇树罗,摇树的时候就会把不必要的枯枝烂叶给摇下来,同理,到代码中,tree shaking
就是把没有用到的代码shaking掉。tree-shaking
只有使用es6的模块化规范才有效,假如你使用commonJs
模块化规范是搞不了tree-shaking
的,为什么?
由于
ES6
模块是运行时加载(静态加载),就可以在编译时就完成模块加载,使得编译时就能确定模块的依赖关系,可以进行可靠的静态分析,这就是tree shaking
的基础。
而CommonsJs
必需在跑起来运行的时候才能确定依赖关系,所以与不能tree-shaking
。
— 参考阮大神的讲解–>Module 的语法
概述
2、配置开发环境
假如你看要
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,}
- 这里配置好了就ok了,但是有个最大的问题是什么,看官网是这么说的:
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配置的默认行为就是如此。
- 我们配置使用bable配置es6的时候就要使用了这个,如此一来,岂不凉了?为了不让
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 } ] ] }}
3、配置生产环境
- 配置生产环境就很简单了。
- 将
mode
设置为production
; - 设置下
sideEffects
; - 设置下
bable
配置modules: false
。
- 将
4、小结
根据官网的conclusion总结,开启
tree-shaking
有四点:- 必需使用es6的模块化规范(
import/export
); - 要确保你的编译器不会将es6的
import/expot
转为commonJs规范的require
写法;(所以我们需要将@babel/preset-env
的modules
参数设置为false
) - 在
package.json
中增加sideEffects
告诉webpack哪些是不用tree-shaking
的文件。 - 模式mode要为
production
,由于production
会自动使用terser-webpack-plugin
这个插件来做少量压缩、无用代码的剔除实现tree-shaking
。
- 必需使用es6的模块化规范(
这块内容有点东西啊,也不知道我了解的对不对,看看别人的文章吧:
- https://juejin.im/post/5a4dc842518825698e7279a9
- https://es6.ruanyifeng.com/#docs/module
- https://juejin.im/post/5d706172f265da03ca118d28
- https://juejin.im/post/5dcec27d5188254b0147e619
- https://webpack.js.org/guides/tree-shaking/#conclusion
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 16、webpack从0到1-tree shaking