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 相关文章推荐
JQuery的一些小应用收集
Mar 27 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 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二维/三维数组转字符串
2013/09/13 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
python 调用HBase的简单实例
2016/12/18 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python如何将多个PDF进行合并
2019/08/13 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python代码实现猜拳小游戏
2020/11/30 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
班组长的岗位职责
2013/12/09 职场文书
九年级历史教学反思
2014/01/27 职场文书
优秀经理事迹材料
2014/02/01 职场文书
医院义诊活动总结
2014/07/04 职场文书
听证通知书
2015/04/24 职场文书
读书笔记怎么写
2015/07/01 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书