您可能知道，單個(gè)單塊JavaScript包(曾經(jīng)是最佳實(shí)踐)已不再是現(xiàn)代web應(yīng)用程序的選擇。研究表明，更大的捆綁會增加內(nèi)存使用量和CPU成本，尤其是在中低端移動設(shè)備上。

webpack有很多特性可以幫助你實(shí)現(xiàn)更小的bundle并控制資源的加載優(yōu)先級。其中最引人注目的是代碼分割，它提供了一種將代碼分割成各種bundle的方法，這些bundle可以按需加載或并行加載。另一個(gè)是性能提示，它指示發(fā)出的包大小何時(shí)在構(gòu)建時(shí)跨越指定的閾值，以便您可以進(jìn)行優(yōu)化或刪除不必要的代碼。

webpack生產(chǎn)版本的默認(rèn)行為是當(dāng)資產(chǎn)大小或入口點(diǎn)超過250KB (244KiB)時(shí)顯示警告，但是您可以通過webpack.config.js文件中的performance對象來配置如何顯示性能提示和大小閾值。

首先，我們需要設(shè)定一個(gè)自定義預(yù)算

資產(chǎn)和入口點(diǎn)(webpack開始構(gòu)建包的入口點(diǎn))的默認(rèn)大小閾值可能并不總是符合您的需求，但它們可以配置為這樣。

maxAssetSize和maxEntrypointSize屬性分別控制資產(chǎn)和入口點(diǎn)的閾值大小，它們都以字節(jié)為單位設(shè)置。后者確保從entry對象中列出的文件(通常是JavaScript或Sass文件)創(chuàng)建的包不會超過指定的閾值，而前者對webpack產(chǎn)生的其他資產(chǎn)(例如圖像、字體等)實(shí)施同樣的限制。

如果超過閾值，讓我們顯示一個(gè)錯(cuò)誤

webpack的默認(rèn)警告會在超出預(yù)算閾值時(shí)發(fā)出。它對于開發(fā)環(huán)境來說已經(jīng)足夠好了，但是對于生產(chǎn)環(huán)境來說還不夠好。我們可以通過在性能對象中添加提示屬性并將其設(shè)置為'error'來觸發(fā)錯(cuò)誤:

現(xiàn)在顯示的是錯(cuò)誤而不是警告

提示屬性還有其他有效值，包括'warning'和false，其中false完全禁用警告，即使違反了指定的限制。我不建議在生產(chǎn)模式中使用false。

我們可以把某些資產(chǎn)從預(yù)算中剔除

webpack為它產(chǎn)生的每種類型的資產(chǎn)強(qiáng)制設(shè)置大小閾值。這并不總是一件好事，因?yàn)槿绻l(fā)出的任何資產(chǎn)超過了指定的限制，就會拋出錯(cuò)誤。例如，如果我們將webpack設(shè)置為處理圖像，如果只有一個(gè)圖像超過了閾值，我們就會得到一個(gè)錯(cuò)誤。

這告訴webpack在計(jì)算性能提示時(shí)要排除任何以.jpg擴(kuò)展名結(jié)尾的文件。它能夠提供更復(fù)雜的邏輯，以滿足環(huán)境、文件類型和其他資源的各種條件。

構(gòu)建現(xiàn)在是成功的，但是您可能需要尋找一種不同的方法來控制映像大小。

限制

雖然這對我來說是一個(gè)很好的工作解決方案，但我遇到的一個(gè)限制是，相同的預(yù)算閾值適用于所有資產(chǎn)和入口點(diǎn)。換句話說，還不可能根據(jù)需要設(shè)置多個(gè)預(yù)算，比如對JavaScript、CSS和圖像文件的不同限制。

也就是說，有一個(gè)開放的pull請求可以移除這個(gè)限制，但是它還沒有合并。這絕對是值得關(guān)注的。

結(jié)論

在任何項(xiàng)目開始時(shí)，設(shè)置一個(gè)性能預(yù)算和執(zhí)行一個(gè)webpack是值得考慮的事情。它將引起人們對您依賴的大小的關(guān)注，并鼓勵(lì)您在可能的情況下尋找更輕的替代品，以避免超出預(yù)算。

也就是說，績效預(yù)算不會就此結(jié)束!資產(chǎn)規(guī)模只是影響性能的眾多因素中的一個(gè)，因此要確保提供最佳體驗(yàn)，還有很多工作要做。運(yùn)行Lighthouse測試是了解您可以使用的其他指標(biāo)以及改進(jìn)建議的重要第一步。

感謝您的閱讀，祝您編程愉快!