這篇文章主要介紹了webpack打包速度優(yōu)化的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè),網(wǎng)站設(shè)計,企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為成百上千服務(wù),成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!

dll

原有項目是線上和本地公用一套dll配置，因為antd這類ui庫需要按需加載所以不能放到dll中，這時可以單獨寫一個dll配置，將所有第三方庫添加到dll中。

這時因為.babelrc中添加了babel-plugin-import插件會導(dǎo)致優(yōu)化不生效，所以需要對開發(fā)環(huán)境單獨配置babel

options的babelrc設(shè)置為false，然后重寫一份babel配置，一定不要添加“import”插件

一個新問題，因為沒有import插件，導(dǎo)致所有antd組件樣式丟失。這時我在index-template.html中加入一行注釋<!-- local-style -->，在本地打包時將其替換為antd相應(yīng)版本在cdn上的css文件

緩存

cache-loader專治花里胡哨！雖然你能在webpack的配置里找到n種緩存設(shè)置，但我發(fā)現(xiàn)cache-loader可以替代其它選項，它會在你的項目中創(chuàng)建一個 .cache-loader的文件夾，里面存放緩存文件，因為是直接寫入硬盤，所以第一次打包的時候會多消耗幾秒

babel-loader & 多線程

上面的圖中可以看到我將babel-loader升級到8+，新的preset和plugin都有了命名上的變化。preset-env是用來替代以前201X的，通過targets可以指定目標代碼（編譯后代碼）的版本，因為是本地開發(fā)，可以指定到chrome的高版本，這樣很多新語法都不需要轉(zhuǎn)換，可以節(jié)省一點時間（打包速度在10秒以下之后減一秒都是10%的提升啊！）不過這個方案要慎重使用，因為會造成線上本地環(huán)境不統(tǒng)一，難保不出現(xiàn)什么神奇的bug

拔掉HappyPack提升性能

在測試的過程中我發(fā)現(xiàn)一個神奇的事情，就是HappyPack反倒會降低打包時間，我經(jīng)過反復(fù)測試，似乎babel-loader8+自帶了多線程優(yōu)化，所以HappyPack已經(jīng)沒用了（反而因為線程通信造成了資源浪費）。babel-loader8+的cpu使用率以及打包時間和babel-loader6+加HappyPack是相差不多的，但我在google上搜索時并沒有看到有人提及此事，官網(wǎng)也沒看到有個說明（管他那么多呢，能提升速度就行啦！）

后續(xù)計劃

這個項目是兩個人迭代一年份的代碼量，按照上面的配置大部分項目應(yīng)該都可以優(yōu)化到10秒左右的速度(看項目大小，20秒以下應(yīng)該都是正常的)，還有一些小的優(yōu)化細節(jié)對性能影響不大所以忽略掉了。目前webpack還是3+版本，因為4的一些變化擔(dān)心影響過大，暫時沒升級，升級之后應(yīng)該還會有一些小提速
這7秒還不是最終的速度，我估計5秒應(yīng)該沒啥問題，后面再想優(yōu)化就需要腦洞大開了

感謝你能夠認真閱讀完這篇文章，希望小編分享的“webpack打包速度優(yōu)化的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

本文標題：webpack打包速度優(yōu)化的示例分析
標題網(wǎng)址：http://www.chinadenli.net/article34/isppse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、標簽優(yōu)化、網(wǎng)站維護、網(wǎng)站排名、建站公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)