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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
js实现小星星游戏
Mar 23 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 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
PHP中$this和$that指针使用实例
2015/01/06 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
Python中enumerate函数代码解析
2017/10/31 Python
python实现日常记账本小程序
2018/03/10 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
python开发入门——set的使用
2020/09/03 Python
Python中过滤字符串列表的方法
2020/12/22 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
文明礼仪伴我行演讲稿
2014/05/12 职场文书
玄武湖导游词
2015/02/05 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
教师节主题班会方案
2015/08/17 职场文书
导游词之神仙居景区
2019/11/15 职场文书
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫