Webpack Tree Shaking
Tree Shaking
tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。
webpack 2 正式版本内置支持 ES2015 模块(也叫做 harmony modules)和未使用模块检测能力。新的 webpack 4 正式版本扩展了此检测能力,通过 package.json 的 “sideEffects” 属性作为标记,向 compiler 提供提示,表明项目中的哪些文件是 “pure(纯正 ES2015 模块)”,由此可以安全地删除文件中未使用的部分。
sideEffects
将文件标记为 side-effect-free.在一个纯粹的 ESM 模块世界中,很容易识别出哪些文件有副作用。然而,我们的项目无法达到这种纯度,所以,此时有必要提示 webpack compiler 哪些代码是“纯粹部分”。
通过 package.json 的 “sideEffects” 属性,来实现这种方式。
{"name": "your-project","sideEffects": false
}
如果你的代码确实有一些副作用,可以改为提供一个数组:
{"name": "your-project","sideEffects": ["./src/some-side-effectful-file.js", "*.css"]
}
将函数调用标记为无副作用
是可以告诉 webpack 一个函数调用是无副作用的,只要通过 /#PURE/ 注释。它可以被放到函数调用之前,用来标记它们是无副作用的(pure)。传到函数中的入参是无法被刚才的注释所标记,需要单独每一个标记才可以。如果一个没被使用的变量定义的初始值被认为是无副作用的(pure),它会被标记为死代码,不会被执行且会被压缩工具清除掉。这个行为被会开启当 optimization.innerGraph 被设置成 true。
// file.js
/*#__PURE__*/ double(55);
使用 production 模式
上述其实是描述如何在 development 模式下开启 tree-shaking,但其实在 development 模式下,为了开发和调试方便,我们是不会开启压缩的,而 production 下,会自动为我们开启 tree-shaking。去掉 usedExports 和 uglifyjs-webpack-plugin 相关配置,将 mode 修改为 production。
{mode: 'production'
}
Webpack Tree Shaking
Webpack Tree Shaking相关推荐
- Webpack进阶(一) tree shaking与不同mode
Tree Shaking 生产环境去除没有使用到的内容(开发环境没有删除,会影响调试) 只支持ESM规范(静态引入,编译时引入),不支持CJS(动态引入,执行时引入) // webpack.confi ...
- webpack学习(四) -- css tree shaking
css tree shaking 我们和webpack(三)一样,用案例说话 安装css需要的两个loader,css-loader 和style-loader npm install css-loa ...
- Webpack 实现 Tree shaking 的前世今生
作者 | 左琳 责编 | 欧阳姝黎 前言 如果看过 rollup 系列的这篇文章 - 无用代码去哪了?项目减重之 rollup 的 Tree-shaking,那你一定对 tree-shak ...
- webpack构建中tree shaking、scope Hoisting(面试题)
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
- webpack高级应用篇(九):tree shaking(usedExports) 与 sideEffects
目录 tree shaking(usedExports) tree shaking 前 tree shaking 后 sideEffects(副作用) 解释 tree shaking 和 `sideE ...
- webpack中的tree shaking(树摇)-----移除未使用的代码
本篇大致概括一下tree shaking的作用以及与webpack相结合使用 什么是tree shaking 引用webpack官网的原文来说: tree shaking 是一个术语,通常用于描述移除 ...
- Webpack之Tree Shaking与Scope Hoisting
Webpack之Tree Shaking与Scope Hoisting 一.Tree Shaking 二.webpack中使用Tree-shanking 三.Scope Hoisting 一.Tree ...
- demo10 关于JS Tree Shaking
1.什么是 tree shaking 借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析,webpack 能够利用 Tree Shaking 进行按需加载,移除 ...
- 【tree shaking】Tree-shaking之副作用
前言 Tree-shaking,顾名思义"摇树".webpack会在生产环境打包时"摇"掉无用的,死的代码,也就是dead code. 由于Tree-shaki ...
最新文章
- 《信息可视化:交互设计(原书第2版)》——第2章基本概念
- 关于bind1st和bind2nd
- Leetcode 45. 跳跃游戏 II (每日一题 20210922)
- JavaBean笔记
- Java JUC工具类--ForkJoin
- MySQL 5.6.20-enterprise-commercial的参数文件位置问题
- k8s jenkins pipeline 多分支发布_给 Jenkins 换一个新皮肤:BlueOcean
- no connection could be made because the target machine actively refused it.问题解决
- linux中shell数组的使用和建立
- 教育学相关期刊杂志介绍
- Excel取消合并单元格时在每个单元格中保留内容,你会批量操作吗?
- MT【91】空间余弦定理
- 固态硬盘和机械硬盘的区别是什么
- 冷启动与热启动的定义
- 初赛De各种各样的知识点
- Oracle 行转列 动态出转换的列
- 分布式、服务化的企业级 ERP 系统架构设计方案
- 大数据分析培训好就业吗
- [附源码]Java计算机毕业设计SSM电子工厂进销存管理系统
- pc全屏网页布局小技巧