16、webpack从0到1-tree shaking
2020/3/25 8:01:51
本文主要是介绍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的模块化规范(
-
这块内容有点东西啊,也不知道我理解的对不对,看看别人的文章吧:
这篇关于16、webpack从0到1-tree shaking的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03如何安装 App 并连接到飞牛 NAS?-icode9专业技术文章分享
- 2024-10-03如何安装飞牛 TV 并连接到影视服务器?-icode9专业技术文章分享
- 2024-10-03如何在PVE和ESXI上安装飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS安装系统异常情况处理-icode9专业技术文章分享
- 2024-10-03飞牛NAS如何创建存储空间?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS硬盘会自动休眠吗?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何安装飞牛影视和创建媒体库?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何为家人朋友开通影视账号?-icode9专业技术文章分享