怎么下载网站源码,如何做网站怎么赚钱,品牌网站设计公司价格,成都 网站建设培训班文章目录 一文大白话讲清楚webpack基本使用——17——Tree Shaking1. 建议按文章顺序从头看#xff0c;一看到底#xff0c;豁然开朗2. 啥叫Tree Shaking3. 什么是死代码#xff0c;怎么来的3. Tree Shaking的流程3.1 标记3.2 利用Terser摇起来 4. 具体使用方式4.1 适用前提… 文章目录 一文大白话讲清楚webpack基本使用——17——Tree Shaking1. 建议按文章顺序从头看一看到底豁然开朗2. 啥叫Tree Shaking3. 什么是死代码怎么来的3. Tree Shaking的流程3.1 标记3.2 利用Terser摇起来 4. 具体使用方式4.1 适用前提4.2 使用流程 5. 副作用代码5.1 通过webpack.config.js中sideEffects指定5.2 通过package.json中sideEffects配置 一文大白话讲清楚webpack基本使用——17——Tree Shaking
1. 建议按文章顺序从头看一看到底豁然开朗
第一篇一文大白话讲清楚啥是个webpack第二篇一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建第三篇一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用第四篇一文大白话讲清楚webpack基本使用——3——图像相关loader的配置和使用第五篇一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用第六篇一文大白话讲清楚webpack基本使用——5——babel的配置和使用第七篇一文大白话讲清楚webpack基本使用——6——热更新及其原理第八篇一文大白话讲清楚webpack基本使用——7——代码分离和懒加载第九篇# 一文大白话讲清楚webpack基本使用——8——开发环境和生产环境的配置和区别第十篇一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用第十一篇一文大白话讲清楚webpack基本使用——10——使用CDN优化加载速度第十二篇一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk第十三篇一文大白话讲清楚webpack基本使用——12——文件指纹和缓存机制第十四篇一文大白话讲清楚webpack基本使用——13——Js代码压缩第十五篇一文大白话讲清楚webpack基本使用——14——CSS代码压缩第十六篇一文大白话讲清楚webpack基本使用——15——HTML代码压缩第十七篇一文大白话讲清楚webpack基本使用——16——图片压缩然后看本篇Tree Shaking
2. 啥叫Tree Shaking
Tree就是树Shaking就是摇摇树为啥要摇树让我们想起一件事果农秋收的时候发现树上的果实有点已经烂了有的还新鲜着果农就想我把这个树上不好的果子都去掉怎么去呢大力摇树因为坏了的果子根部不牢固了稍微用力摇就能掉下来。经过一番摇动之后剩下的果实就是我们需要的好果实了。这就是Tree Shaking。回到webpack中Tree Shaking就是在构建的时候把无用的代码死代码去掉只保留有用的代码这样就能缩减构建包的体积
3. 什么是死代码怎么来的
啥是死代码就是在程序运行的生命周期内webpack认为的不是全部的始终不被执行的代码为啥始终得不到执行呢这是因为在ES6模块出我们通过export暴露外部接口如果有些程序体既没有被暴露出去内部有没有引用依赖那么他讲永远无法被调用执行这时他就成了死代码比如我们在一个js文件里面写了两个方法一个add一个reduce
function add(x,y){return xy
}
function reduce(x,y){return x-y
}
export{add
}我们通过export之暴露了add没有暴露reduce那么reduce将无法被执行就成了死代码或者我们通过import导入了add 和reduce但是只用了add没用reduce也是一样的
import {add ,reduce} from xxx
add()
// recuce()//一直未使用也是死代码可是问题来了为什么我们说这仅是webpack认为的死代码因为者设计一个概念我们举个例子你给我钱了我没要和你给我钱了我没花这两个最终的结果都是我没花你的钱但是后者需要我用完钱了我才能知道你到底花没花你的钱。而前者不一样我一开始就知道我没花因为我压根就没要你钱。放在程序里面正常情况下只有程序运行完了我们才知道哪些代码没有被执行。之所以能提前知道有些代码不能被执行是因为程序压根就没引入这些代码。为啥能知道呢就是因为ES6模块没有暴露这个接口这个事情我们在编译的时候就能知道不用等到运行时。这也是为什么webpack在构建时就可以识别出来有用和无用的代码
3. Tree Shaking的流程
3.1 标记
webpack会从入口文件出发递归的分析代码中的模块依赖标记处用到的模块和导出的函数和变量具体标记如下
所有import标记为/* harmony import*/所有用到的export标记为/* harmony export([type]) */其中type和webpack内部有关可能值为bindingimmutable等没被使用过的import标记为/* unused harmony export [FunctionName] */ 其中FunctionName为export的方法名称
3.2 利用Terser摇起来
通过Terser删除掉没有被用到的到导出语句
4. 具体使用方式
4.1 适用前提
前面讲过了Tree Shaking的适用前提是我们通过ES6模块实现接口暴露而不能是CommonJS(我们之前就是这么写的不要改)另外就是一般在production环境下默认开启Tree Shaking配置optimization.usedExports:true最后要配置JS代码压缩因为Tree Shaking发生在代码压缩阶段(我们之前讲JS代码压缩已经配置过了不要改)
4.2 使用流程 首先我们修改mode为production 然后配置optimization.usedExports:true 为了验证TreeShaking是否生效我们在src/modulejs/add.js里面新增一个addThird方法函数体长一些,暴露 然后我们在main.js里面倒入addTHird并使用 构建打包
npm run build看构建后bundle体积 91KB 然后在main.js里面注销addTRhird的调用 可以看到在编辑器里面倒入的时候addTRhird变量变灰了说明未使用 然后重新构建打包
npm run build看看体积 90KB了说明addTRhird没有被打包进来有人会问了为啥不在打包的js里面查看一下是否打包了addTRhird方法因为我们把代码压缩了找起来比较麻烦谢谢ok ,摇完了
5. 副作用代码
简单点啥叫副作用就是函数除了返回值还干了点别的
let a0;
function add (x,y){a2;return xy
}
add(1,2)add除了返回xy还修改了外部变量所以他是副作用函数为啥要讲副作用就是有些代码没用但是又不想删除明白没有就是比如这个add函数可能我们最后在main.js没引用构建的时候本该删除但是删了他影响了a所以我们要考虑一下要不要删如果不想删我们可以指定配置有副作用的代码的不删除
5.1 通过webpack.config.js中sideEffects指定
在webpack.config.js里面配置sideEffects数组数组元素是具有副作用的模块js
module.exports{sideEffects:[./xxx.js]
}5.2 通过package.json中sideEffects配置
{sideEffects:true//所有导入文件都视为有副作用sideEfeects:false//都没有副作用sideEffects:[sss/jx]//指定哪些有副作用
}
