資訊專欄INFORMATION COLUMN
摘要：概念由來(lái)已久，今天再來(lái)談一談，是因?yàn)橹杏辛诵碌膬?yōu)化。簡(jiǎn)單的介紹下什么是。它已經(jīng)為我們消除了副作用。而且我并沒(méi)有引入。即便根據(jù)文件大小，可能還有朋友持懷疑態(tài)度。因?yàn)樽罱沤佑|。所以沒(méi)有在低版本的時(shí)候打包過(guò)。
Tree-Shaking概念由來(lái)已久，今天再來(lái)談一談，是因?yàn)閣ebpack4中有了新的優(yōu)化。
簡(jiǎn)單的介紹下什么是Tree-Shaking。
代碼不會(huì)被執(zhí)行
if(false) {
do something
}
代碼只寫(xiě)不讀
這樣的代碼可以稱之為dead code。再舉個(gè)很簡(jiǎn)單的列子
a.js中
export function readCookie(){
do something
}
export function createCookie(){
do something
}
b.js中
import {readCookie} from "./a.js";
readCookie()
因?yàn)閎中并沒(méi)有import createCookie，故而在webpack打包的時(shí)候會(huì)將其標(biāo)記為 unused harmony
最后在uglify階段被刪除掉。
現(xiàn)在是es6時(shí)代，所以大家都已經(jīng)養(yǎng)成通過(guò)export 暴露方法，所以沒(méi)啥好說(shuō)的。
但一切都是建立沒(méi)有副作用的基礎(chǔ)上的，不了解的可以先看下這篇文
你的Tree-Shaking并沒(méi)什么卵用
簡(jiǎn)單總結(jié)下，就是說(shuō)如果暴露的方法，不是純函數(shù)，可能有副作用（如參數(shù)是引用類型），那么在打包構(gòu)建的過(guò)程中就不會(huì)被優(yōu)化掉。
舉個(gè)非常明顯的例子。
阿里巴巴的 ant-design。
import { DatePicker } from "antd"; // 但是這樣需要引入babel-plugin-import才能按需加載
import DatePicker from "antd/lib/DatePicker "; babel-plugin-importsg實(shí)際上就是把上面的寫(xiě)法構(gòu)建成了下面的寫(xiě)法
antd里面實(shí)際上就是export所有的組件，但是沒(méi)有引入的組件，因?yàn)楦弊饔?，不能刪除，所以才有了按需加載的說(shuō)法。
可隨著webpack4.0的到來(lái)。它已經(jīng)為我們消除了副作用。親自測(cè)試了下。
采用import { DatePicker } from "antd" 引入的文件大小為1.18。
采用 import DatePicker from "antd/lib/date-picker"; 引入文件大小為1.23。有點(diǎn)點(diǎn)差別甚至還高了，但不糾結(jié)，我們只需要知道就是上面的引入方式根本就不會(huì)比下面的所謂的按需引入方式大。。而且我并沒(méi)有引入babel-plugin-import。
即便根據(jù)文件大小，可能還有朋友持懷疑態(tài)度。那我還去打包后的代碼里面截圖下。
我搜索了Breadcrumb這個(gè)組件，但是沒(méi)有搜索到。隨后我import {DatePicker, Breadcrumb } from "antd";進(jìn)來(lái)這個(gè)組件，并打包。
可以看見(jiàn)import之后，能夠搜索到了。并且文件大小由1.18升到了1.19
好了。webpack4趕緊用起來(lái)。因?yàn)樽罱沤佑|ant-design。所以沒(méi)有在webpack低版本的時(shí)候打包過(guò)ant-design。如果哪位兄弟還沒(méi)升級(jí)的，可以回復(fù)下，看看在不按需加載ant-design的情況下，大概有多大。
如有錯(cuò)誤，歡迎留言指正。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102609.html
摘要：如何權(quán)衡優(yōu)化優(yōu)化原則優(yōu)化的目的是希望降低程序的整體開(kāi)銷。雖然在程序中有許多因素可以優(yōu)化，但通常人們會(huì)認(rèn)為這個(gè)開(kāi)銷就是程序的執(zhí)行時(shí)間，其實(shí)我們更應(yīng)該將重點(diǎn)放在對(duì)程序整體開(kāi)銷最大的那個(gè)部分。 性能是一個(gè)網(wǎng)站成功的關(guān)鍵，然而，如今日益豐富的內(nèi)容和大量使用Ajax的Web應(yīng)用程序已迫使瀏覽器達(dá)到其處理能力的極限，這就迫使我們需要一些技術(shù)來(lái)優(yōu)化我們網(wǎng)站的性能！我相信已經(jīng)有不少人看過(guò)了Yah...
摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問(wèn)題我們都知道對(duì)頁(yè)面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁(yè)面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁(yè)面的性能。這種方式主要解決了淺談前端中的過(guò)早優(yōu)化問(wèn)題過(guò)早優(yōu)化是萬(wàn)惡之源。 優(yōu)化向：?jiǎn)雾?yè)應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁(yè)面的內(nèi)容，這就是單頁(yè)應(yīng)用。在一個(gè)單頁(yè)應(yīng)用中，往往只有一...
摘要：顯示處于不可中斷的休眠的進(jìn)程數(shù)量。我們可以實(shí)用內(nèi)存數(shù)據(jù)庫(kù)，替代他的功能。 MySQL對(duì)于很多Linux從業(yè)者而言，是一個(gè)非常棘手的問(wèn)題，多數(shù)情況都是因?yàn)閷?duì)數(shù)據(jù)庫(kù)出現(xiàn)問(wèn)題的情況和處理思路不清晰。在進(jìn)行MySQL的優(yōu)化之前必須要了解的就是MySQL的查詢過(guò)程，很多的查詢優(yōu)化工作實(shí)際上就是遵循一些原則讓MySQL的優(yōu)化器能夠按照預(yù)想的合理方式運(yùn)行而已。 showImg(https://seg...
摘要：優(yōu)化項(xiàng)也會(huì)引發(fā)一些問(wèn)題。檢查你的代碼是否工作并修復(fù)問(wèn)題。從起，及以上的優(yōu)化級(jí)別默認(rèn)啟動(dòng)了這項(xiàng)設(shè)置。目前正在進(jìn)行改進(jìn)。代碼移植系列文章代碼移植主題系列文章是中文站點(diǎn)的一部分內(nèi)容。 作者：云荒杯傾歡迎加入Wasm和emscripten技術(shù)交流群，群聊號(hào)碼：939206522。 這是關(guān)于Emscripten的系列文章，更多文章請(qǐng)看下面鏈接。 Emscripten代碼移植系列文章 Emscr...
閱讀 2351·2021-11-24 10:27
閱讀 3593·2019-08-30 15:55
閱讀 3355·2019-08-30 15:53
閱讀 2355·2019-08-29 17:27
閱讀 1445·2019-08-26 13:47
閱讀 3558·2019-08-26 10:28
閱讀 927·2019-08-23 15:59
閱讀 2871·2019-08-23 15:19
