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

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

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

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

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

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

如果超過閾值，讓我們顯示一個錯誤

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

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

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

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

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

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

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

限制

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

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

結(jié)論

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

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

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