背景

大家平時(shí)在查 webpack構(gòu)建體積優(yōu)化 ，可能都會(huì)查到 tree-shaking 這個(gè)東西，很多人看到這個(gè)東西，就會(huì)把它背下來(lái)，用來(lái)應(yīng)付以后面試官可能會(huì)問(wèn)到的情況。lgc28資訊網(wǎng)——每日最新資訊28at.com

但是，又有多少人去真的了解一下 tree-shaking 呢？自己去實(shí)踐一下看 tree-shaking 到底起了哪些作用？對(duì)于我們的打包體積的優(yōu)化又有多少呢？lgc28資訊網(wǎng)——每日最新資訊28at.com

有啥用？

Tree Shaking中文含義是搖樹(shù)，在webpack中指的是打包時(shí)把無(wú)用的代碼搖掉，以優(yōu)化打包結(jié)果。lgc28資訊網(wǎng)——每日最新資訊28at.com

而webpack5已經(jīng)自帶了這個(gè)功能了，當(dāng)打包環(huán)境為production時(shí)，默認(rèn)開(kāi)啟tree-shaking功能。lgc28資訊網(wǎng)——每日最新資訊28at.com

實(shí)踐

前置準(zhǔn)備

準(zhǔn)備兩個(gè)文件main.js、util.jslgc28資訊網(wǎng)——每日最新資訊28at.com

• util.js

function a () {  console.log('a')}function b () {  console.log('b')}export default {  a, b}

• main.js

import a from './util'// 使用a變量，調(diào)用文件里面的a函數(shù)，不使用b函數(shù)console.log(a.a())console.log('hello world')// 不可能執(zhí)行的代碼if (false) {  console.log('haha')}// 定義了但是沒(méi)用的變量const m = 1

打包

前面說(shuō)了webpack5在環(huán)境production下打包的話，默認(rèn)開(kāi)啟tree-shaking，那我們運(yùn)行npm run build進(jìn)行一下打包，看看打包后的代碼長(zhǎng)啥樣：lgc28資訊網(wǎng)——每日最新資訊28at.com

(()=>{"use strict";const o=function(){console.log("a")};console.log(o())console.log("hello world")})();

結(jié)論：可以看到打包后，把b函數(shù)、不可能執(zhí)行的代碼、定義未用的變量通通都剔除了，這在一個(gè)項(xiàng)目中，能減少很多的代碼量，進(jìn)而減少打包后的文件體積。lgc28資訊網(wǎng)——每日最新資訊28at.com

sideEffects

副作用

先來(lái)講講一個(gè)東西——副作用，是什么東西呢？副作用指的是：除了導(dǎo)出成員之外所做的事情，我舉個(gè)例子，下面的a.js是沒(méi)副作用的，b.js是有副作用的：lgc28資訊網(wǎng)——每日最新資訊28at.com

• a.js

function console () {  console.log('console')}export default {  console}

• b.js

function console () {  console.log('console')}// 這個(gè)就是副作用，會(huì)影響全局的數(shù)組Array.prototype.func = () => {}export default {  console}

有無(wú)副作用的判斷，可以決定tree-shaking的優(yōu)化程度，舉個(gè)例子：lgc28資訊網(wǎng)——每日最新資訊28at.com

• 我現(xiàn)在引入a.js但是我不用他的console函數(shù)，那么在優(yōu)化階段我完全可以不打包a.js這個(gè)文件。
• 我現(xiàn)在引入b.js但是我不用他的console函數(shù)，但是我不可以不打包b.js這個(gè)文件，因?yàn)樗懈弊饔茫荒懿淮虬?/li>

sideEffects的使用

sideEffects可以在package.json中設(shè)置：lgc28資訊網(wǎng)——每日最新資訊28at.com

// 所有文件都有副作用，全都不可 tree-shaking{ "sideEffects": true}// 沒(méi)有文件有副作用，全都可以 tree-shaking{ "sideEffects": false}// 只有這些文件有副作用，// 所有其他文件都可以 tree-shaking，// 但會(huì)保留這些文件{ "sideEffects": [  "./src/file1.js",  "./src/file2.js" ]}

優(yōu)化體積

當(dāng)我把sideEffects設(shè)置成true之后，整個(gè)打包體積增加了100k，說(shuō)明默認(rèn)的false還是有用的。。lgc28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-79983-0.html大廠喜歡問(wèn)的TreeShaking到底是啥？好在哪呢？五分鐘弄懂！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 我們一起深入理解Flink State

下一篇： 高并發(fā)輕松應(yīng)對(duì)：.NET Core實(shí)戰(zhàn)解析異步配置提高并發(fā)響應(yīng)