建站
咨詢
售后
建站咨詢
新聞中心
背景
上一篇文章我們分析了：為什么 esbuild 這么快
衛(wèi)東網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),衛(wèi)東網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為衛(wèi)東成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的衛(wèi)東做網(wǎng)站的公司定做！
還有數(shù)據(jù)對(duì)比：
可以明顯看到：esbuild 一騎絕塵, 以絕對(duì)優(yōu)勢(shì)領(lǐng)先。
看看最下面, 赫然是我們最熟悉的 webpack。
那么, webpack 的構(gòu)建為什么慢呢?到底慢在哪呢 ?
下面是我的一些思考，分享給大家，希望對(duì)大家有所幫助。
正文
首先我們先看一下 webpack 構(gòu)建的大致流程:
webpack build flow
流程走的比較長(zhǎng)。
那么，整個(gè)流程的性能瓶頸在哪里呢?
我認(rèn)為主要是在以下兩個(gè)階段：
- 代碼構(gòu)建
- 代碼壓縮
圖片
https://www.quora.com/What-is-Webpack-and-babel-loader
我們分別來(lái)看。
1. 代碼構(gòu)建
代碼構(gòu)建階段， 需要做的一個(gè)很重要的事情是模塊依賴分析, 生成Module Graph。
這部分有十分復(fù)雜的流程。
webpack build graph
https://medium.com/webpack/the-chunk-graph-algorithm-week-26-29-7c88aa5e4b4e
這部分非常復(fù)雜，也比較耗時(shí)。
為此 webpack 也設(shè)計(jì)了對(duì)應(yīng)的的算法去優(yōu)化這部分，感興趣的可以去研究一下。
這部分的詳細(xì)解析，有個(gè)視頻講的不錯(cuò)，感興趣的可以去看一下：
https://youtu.be/Lzh8A0p3z8g
說(shuō)回構(gòu)建。
現(xiàn)代瀏覽器對(duì) esm 支持的越來(lái)越好，模塊依賴分析的工作，瀏覽器就能完成。
而且, 瀏覽器的很多包分析工具是用C/C++寫(xiě)的, 顯然是要比 webpack 使用 js 去分析整個(gè)依賴圖譜更具優(yōu)勢(shì)，速度上也是要快很多的。
2. 代碼壓縮
目前最成熟的 js 壓縮工具是 UglifyJS。
它會(huì)分析 js 的代碼語(yǔ)法樹(shù)， 理解代碼含義，從而能做到諸如: 去掉無(wú)效代碼，去掉日志輸出代碼，縮短變量名等優(yōu)化。
webpack 使用壓縮插件來(lái)完成這部分工作。
其中: webpack 使用的 terser, 是用 js 寫(xiě)的， 源自于最早的 uglyfy.js , 功能很豐富， 但是速度非常非常慢。
這點(diǎn)， 也是 webpack 速度慢的原因之一。
不過(guò)在代碼壓縮方面， vite 選擇的也是Terser。
對(duì)此，文檔中有相關(guān)描述：
- build.minify:
- 類(lèi)型：boolean | 'terser' | 'esbuild'
- 默認(rèn)：'terser'
設(shè)置為 false 可以禁用最小化混淆，或是用來(lái)指定使用哪種混淆器。
默認(rèn)為 Terser。
雖然 Terser 相對(duì)較慢，但大多數(shù)情況下構(gòu)建后的文件體積更小。
ESbuild 最小化混淆更快, 但構(gòu)建后的文件相對(duì)更大。
更多信息可以參考：https://cn.vitejs.dev/config/#build-minify
另外，如果你有留意， 就會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象:
- Esbuild, 使用 GO 寫(xiě)的。
- SWC， 是用 Rust 寫(xiě)的。
都不是用js寫(xiě)的。
未來(lái)前端的編譯工具，大概也會(huì)往這個(gè)方向走, 要么用 Go 寫(xiě), 要么用 Rust 寫(xiě)，而不是把這種能形成性能瓶頸的東西用 js 來(lái)實(shí)現(xiàn)。
還有一點(diǎn)需要提一下。
在文章開(kāi)頭的圖中， 看起來(lái) webpack5 的速度比 webpack4 要慢:
但這不代表 webpack 5 不好，大家不要誤會(huì)啊。
webpack 5 里面 做了大量的優(yōu)化， 甩掉了不少歷史包袱。
有一些新特性還有非常有用的, 比如：
- Module Federation
- Real Content Hash
不難想到，webpack 團(tuán)隊(duì)還是做出了很多努力的， ?? 。
總結(jié)
這篇文章， 是半夜突然有了思路， 花了兩個(gè)小時(shí)寫(xiě)出來(lái)。
本文轉(zhuǎn)載自微信公眾號(hào)「前端皮小蛋」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端皮小蛋公眾號(hào)。
網(wǎng)站欄目：「不懂就問(wèn)」為什么Webpack這么慢？
本文鏈接：http://www.5511xx.com/article/cdhjiei.html
