treeShaking和sideEffects详解
什么是treeShaking?
treeShaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。
treeShaking有什么用?
至于说有什么用呢?它的作用就是将程序中没有用到的代码在打包编译的时候都删除掉,这样能减少打包后包的体积大小,减少程序执行的时长
和传统DCE(Dead Code Elimination)有什么区别?
传统DCE是消除不可能执行的代码,而treeShaking虽然也是DCE新的实现方式,但是它是通过消除没有用到的代码来达到目的
Dead Code的特征:
代码不会被执行,不可到达
代码执行的结果不会被用到
代码只会影响死变量(只写不读)
在JS中是什么在做DCE?
首先肯定不是浏览器做DCE,因为当我们的代码送到浏览器,那还谈什么消除无法执行的代码来优化呢,所以肯定是送到浏览器之前的步骤进行优化。传统DCE使用到的是代码压缩优化工具uglify来完成的;而treeShaking则是通过webpack来完成的;
什么是sideEffects?
其主要功能是让 webpack 去除 treeShaking 带来副作用的代码。怎么去理解这个副作用呢?副作用可以理解成某个模块执行时除了导出成员之外所作的事情,比如我们修改了window上的属性,或者提供某个polyfill;如果没有这些副作用的话那么webpack就会清除没有用的代码,也就是上面说的treeShaking。
sideEffects写法?
true/false,false 为了告诉 webpack 我这个 npm 包里的所有文件代码都是没有副作用的
数组,数组则表示告诉 webpack 我这个 npm 包里指定文件代码是没有副作用的
作者:24K纯帅豆
链接:https://www.jianshu.com/p/c6f50f955140
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
下面是自己的简短总结:
tree shaking: 去除无用代码
前提:1、必须使用ES6模块化 2、开启production环境
作用:减少代码体积
在package.json中配置
"sideEffects":false 所有代码都没有副作用(都可以进行tree shaking)加上之后打包之后的build里面可能就没有css文件夹了。问题:可能会把css / @babel/polyfill 等(副作用)文件干掉所以要这样配置,这样的话就不会对css和less文件进行tree-shaking处理了"sideEffects":["*.css","*.less"]
更多详情请阅读webpack官网:https://webpack.docschina.org/guides/tree-shaking/#root
treeShaking和sideEffects详解相关推荐
- 详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...
- 一篇由简到难的 Vue 面试题+详解答案
作者:Big shark@LX 原文:https://juejin.cn/post/6961222829979697165 前言 本文整理了「高频」出现的 Vue 相关面试题并且附带「详解答案」 难度 ...
- 详解 30 道 Vue 面试题(建议收藏)
作者:我是你的超级英雄 https://juejin.im/post/5d59f2a451882549be53b170 前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以 ...
- 详解 30 道 Vue 面试题
作者:我是你的超级英雄 https://juejin.im/post/5d59f2a451882549be53b170 前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性.框架的原理以 ...
- 一零四、前端性能优化详解
1 前端性能优化 介绍 页面性能优化 浏览器 浏览器的主要作用 浏览器的组成结构 浏览器是多进程的 浏览器的渲染机制 重排reflow与重绘repaint 页面加载缓慢的原因 浏览器部分 代码部分 优 ...
- 最全最详细前端vue面试题+详解答案(拿到高薪offer不是梦)
最全vue面试题+详解答案 1.MVC 和 MVVM 区别 MVC MVC全名是 Model View Controller,时模型 - 视图 - 控制器的缩写,一种软件设计典范. Model(模型) ...
- 详解CommonJS模块与ES6模块
详解CommonJS模块与ES6模块 历史上,JS一直没有模块体系,在ES6之前,最主要的是CommonJS和AMD两种.前者用于服务器,后者用于浏览器,ES6在语言标准的层面上实现了模块功能,使用简 ...
- 【面试题】973- 一篇由简到难的 Vue 面试题+详解答案
作者:Big shark@LX 原文:https://juejin.cn/post/6961222829979697165 前言 本文整理了「高频」出现的 Vue 相关面试题并且附带「详解答案」 难度 ...
- 最全的 Vue 面试题+详解答案
前言 本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 如果对原理感兴趣的同学 欢迎查看小编的手写 Vue ...
最新文章
- Spring Boot 面试,一个问题就干趴下了!
- 8000字讲清楚从0到1搭建电商商品中心(建议收藏)
- Python下载安装
- TCP与UDP网络编程总结(一)
- python列表批量 修改_python实现多进程按序号批量修改文件名的方法示例
- Linux dd 命令
- 开发者供不应求,垃圾项目在去年已造成2.1万亿美元损失
- Spark基础学习笔记01:初步了解Spark
- 列表视图案例3——显示联系人
- datetimepicker中文不生效_Python reStructuredText 帮助文件中文乱码
- 蓝牙 查询码 android,android bluetooth UUID蓝牙查询表
- 【UVA11168】Airport(凸包+点到直线距离(一般式))
- Python学习-第三天-面向对象编程基础
- STM32固件库编程入门
- Oracle数据库分页
- 【Android初学者】UI组件 介绍
- Java 类对象基础知识--科普
- 中秋之际,我想给月亮做一个智能化改造
- 标准盒模型 和怪异盒模型
- 【摘自csdn】一场我没有看懂的相亲
热门文章
- 【Torch API】pytorch 中torch.ones_like和torch.zeros_like函数详解
- 绑定ZBar的OpenCV条形码和QR码扫描器
- 渗透测试学习笔记_Day1
- 【操作系统①】——操作系统的定义和功能、操作系统的四大特征【并发 共享 虚拟 异步】
- react中使用构建缓存_如何使用React构建Chatbot
- smartq ten3 android4,SmartDevices智器SmartQ Ten3平板电脑Android 4.1固件
- 创建银行账户,实现存款,取款,转账(正解)
- 基于cnn的图像二分类算法(一)
- 宽德投资C++开发 一面(48min)
- 100个冷笑话 越到后面越冷