Tree-Shaking 机制快速掌握

目录
  • 写在前面
  • 直奔主题
  • 最后

写在前面

最近在读霍老师的《Vue.js设计与实现》，感觉收获很多，由于霍老师是官方Vue维护成员，会从很通俗易懂的角度去讲Vue的实现细节。而不是按照源码死讲解，很不错，推荐给大伙!

直奔主题

Tree-Shaking 的本质其实就是消除无用代码也就是dead code，减小打包后文件，不太清楚dead code概念的不用担心，下面会讲到。Tree-Shaking是打包构建工具常用的优化手段。在我们日常的开发最常使用的，可能就是ESM的使用，会触发默认的Tree-Shaking机制并对无效代码进行处理。

//utils.js
const str = "Hello Word";
export function fun1(){
    console.log(str);
}
export function fun2(){
    console.log(str);
}
//index.js
import { fun2 } from 'utils.js'

这里的fun1并不会被打包到最后生成 build 文件，证明fun1满足了dead code的条件，从而触发了Tree-Shaking机制。

dead code 条件

1.代码不会被执行，不可到达

2.代码执行的结果不会被用到

3.代码只会影响死变量（只写不读）

这里有一个例外 就是js由于是动态类型的语言 很难从纯编译下解析到当前是否是dead code 如：

//utils.js
function fun1(){
    console.log(str);
}
fun1.prototype.run = function(){
    console.log("run");
}
Array.prototype.stop = function(){
    console.log("stop");
}
export const fun1;

虽然没有被调用，但是在打包后生成的build 文件中依旧会包含这段代码，是因为无法静态解析这段代码是否真正无用，如果删除掉了utils.js 会导致Array原型上方法也失效。所以，这就引出了另一个很重要的概念就是，副作用，如果一个 函数调用会产生副作用，那么就不能将其移除。什么是副作用？简单 地说，副作用就是，当调用函数的时候会对外部产生影响

当我们遇到打包工具无法静态解析的代码，可以通过打包工具的另一个机制去做手动告知

import {fun1} from './utils'
/*#__PURE__*/ fun1()

这里的/*#__PURE__*/ 就是告知打包工具 这段代码的调用不会产生副作用，你随便删，设置过完后再次重新打包就会发现，Array 原型上声明stop 就不包含在内了！

知道了这些，那我们日常应该如何利用Tree-Shaking机制呢？

如在我们的代码中，封装根据开发环境，设置动态api、不同调试log。可以通过打包工具的预构建常量，配合判断，如果环境不是测试环境，会被检测为dead code从而移出构建最终的构建文件中。实现优化打包体积，并且不会影响我们开发的环境。

//webpack.config.js
new webpack.DefinePlugin({
 __DEV_OPTIONS_: JSON.stringify(true)
})
//index.js
if(__DEV_OPTIONS_){
    //初始化开发环境下的相关配置
    initLog();
    setApi();
}

最后

以上就是本篇文章的全部内容了！学习思路来自《Vue.js设计与实现》分享给大家！

更多关于Tree-Shaking 机制的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Tree Shaking实现方法指南

    目录 正文 方式一:JavaScript模拟 方式二:利用AST实现 正文 当使用JavaScript框架或库时,代码中可能会存在许多未使用的函数和变量,这些未使用的代码会使应用程序的文件大小变大,从而影响应用程序的性能.Tree shaking可以解决这个问题,它可以通过检测和删除未使用的代码来减小文件大小并提高应用程序性能. 接下来我们将通过两种方式实现Tree shaking 方式一:JavaScript模拟 1.首先,你需要使用ES6模块来导出和导入代码.ES6模块可以静态分析,从而使T

  • 浅谈Webpack4 Tree Shaking 终极优化指南

    几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到

  • tree shaking功能及使用原理详细解析

    目录 前言 准备工作 生产环境配置tree-shaking 开发环境观察tree-shaking tree-shaking的步骤 sideEffects副作用 commonjs能不能tree-shaking 写在最后 前言 前端在做性能优化的时候,其中一种有效的方式就是减少包体积的大小.而减少包体积大小的其中一种有效的方式就是 tree-shaking,翻译成中文就是摇树.这个词非常形象,当果树结果后,如果用力摇树,那些成熟了但是还挂在树上的果子就会掉下来,减轻树的负担,因为果子已经成熟了,没有

  • JS 加载性能Tree Shaking优化详解

    目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS

  • tree shaking对打包体积优化及作用

    目录 背景 有啥用? 实践 前置准备 打包 sideEffects 副作用 sideEffects的使用 优化体积 背景 大家平时在查 webpack构建体积优化 ,可能都会查到 tree-shaking 这个东西,很多人看到这个东西,就会把它背下来,用来应付以后面试官可能会问到的情况. 但是,又有多少人去真的了解一下 tree-shaking 呢?自己去实践一下看 tree-shaking 到底起了哪些作用?对于我们的打包体积的优化又有多少呢? 有啥用? Tree Shaking中文含义是摇树

  • webpack4 CSS Tree Shaking的使用

    webpack4 CSS Tree Shaking的使用

    本次课程的代码目录(如下图所示): 什么是tree-shaking webpack 2 的到来带来的最棒的新特性之一就是tree-shaking .tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法. webpack 里的tree-shaking的到来不得不归功于es6规范的模块.为什么这么说,如今的前端模块规范很多,比较出流行的比如commonJS , AMD , es6 ,我简单的说一下commonJS和es6模块的区别. 1. CSS 也有 Tree

  • webpack的tree shaking的实现方法

    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 能够不打

  • Tree-Shaking 机制快速掌握

    目录 写在前面 直奔主题 最后 写在前面 最近在读霍老师的<Vue.js设计与实现>,感觉收获很多,由于霍老师是官方Vue维护成员,会从很通俗易懂的角度去讲Vue的实现细节.而不是按照源码死讲解,很不错,推荐给大伙! 直奔主题 Tree-Shaking 的本质其实就是消除无用代码也就是dead code,减小打包后文件,不太清楚dead code概念的不用担心,下面会讲到.Tree-Shaking是打包构建工具常用的优化手段.在我们日常的开发最常使用的,可能就是ESM的使用,会触发默认的Tre

  • 高级前端必会的package.json字段知识详解

    高级前端必会的package.json字段知识详解

    目录 概览 name name命名规范 不安全的URL字符 私源npm包怎么命名? version description keywords homepage repository license author contributors files main bin scripts dependencies.devDependencies.peerDependencies private publishConfig types module unpkg sideEffects 注意点 engin

  • 深入理解 webpack 文件打包机制(小结)

    前言 最近在重拾 webpack 一些知识点,希望对前端模块化有更多的理解,以前对 webpack 打包机制有所好奇,没有理解深入,浅尝则止,最近通过对 webpack 打包后的文件进行查阅,对其如何打包 JS 文件有了更深的理解,希望通过这篇文章,能够帮助读者你理解: webpack 单文件如何进行打包? webpack 多文件如何进行代码切割? webpack1 和 webpack2 在文件打包上有什么区别? webpack2 如何做到 tree shaking? webpack3 如何做到

  • 详解基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web

随机推荐