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之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
node.js博客项目开发手记
Mar 16 Javascript
JS实现打砖块游戏
Feb 14 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使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
javascript字符串函数汇总
2015/12/06 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
基于Python实现的微信好友数据分析
2018/02/26 Python
详解Scrapy Redis入门实战
2020/11/18 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
酒店司机岗位职责
2013/12/14 职场文书
先进集体获奖感言
2014/02/13 职场文书
销售会计岗位职责
2014/03/15 职场文书
开业庆典主持词
2014/03/21 职场文书
竞聘书模板
2014/03/31 职场文书
校园绿化美化方案
2014/06/08 职场文书
节电标语大全
2014/06/23 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js