webpack的tree shaking的实现方法


Posted in Javascript onSeptember 18, 2019

webpack的tree shaking

util.js

export const a = () => {
 console.log("a123456方法");
};
export const b = () => {
 console.log("b123456方法");
};

main.js

import {a} from './utils';
a();

sideEffects

一般而言,上述代码,在 webpack 进行 tree shaking 能够不打包 function b 的代码,这是因为 webpack 对代码进行了分析, b 没有引用不会打包。

但是npm包中,通过这种方式去引用,你会发现 tree shaking 并没有生效, 这是因为webpack无法识别你的代码是否存在副作用,故而无法执行tree shaking ,解决方法是给你的npm包 package.json 加上 sideEffects: false ,告诉webpack是无副作用的, webpack 可以放心处理。

什么是副作用( side effect ),即你的函数会对外部变量造成影响,比如

function a() {}
a.location = window.location
a.location.hash = 'll'

这就是一个副作用函数,所以编写纯函数

es6

如果你的npm包使用了es6的特性,比如类,最终你打包出来的代码只打包了成了es5的,那么恭喜你,基本上你的npm包和 tree shaking 无缘了。

es6转es5(babel),会产生大量的副作用,所以基本上大部分包都提供es6版本的代码, tree shaking 交给你本地的webpack去处理。

当然也不是完全没有办法,antd老大哥就开发了一个babel-plugin-import,实现精确引用的代码的方式,但是你必须将每个模块单独分成一个文件。

总结

基本上tree shaking的解决方法就是导出es6模块,同时标明自己是无副作用的,如果加上babel-plugin-import就更完美了

rollup的一个提案蛮有趣的!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
AngularJS执行流程详解
Feb 17 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
js实现窗口全屏示例详解
Sep 17 #Javascript
js实现简单页面全屏
Sep 17 #Javascript
js模拟F11页面全屏显示
Sep 17 #Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 #Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 #Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 #Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 #Javascript
You might like
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python lxml中etree的简单应用
2019/05/10 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
学生自我鉴定范文
2013/10/04 职场文书
素质拓展感言
2014/01/29 职场文书
公司面试感谢信
2014/02/01 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
股权转让协议书范本
2014/04/12 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL