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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
简单实例处理url特殊符号&处理(2种方法)
Apr 02 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
vue实现鼠标经过动画
Oct 16 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
超简单的微信小程序轮播图
Nov 22 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
一个网马的tips实现分析
2010/11/28 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
利用python发送和接收邮件
2016/09/27 Python
python邮件发送smtplib使用详解
2020/06/16 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
python实现祝福弹窗效果
2019/04/07 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
出纳员岗位职责
2014/03/13 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
Pandas数据结构之Series的使用
2022/03/31 Python