webpack多入口熱加載很慢的原因是什么-創(chuàng)新互聯(lián)

小編給大家分享一下webpack多入口熱加載很慢的原因是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

創(chuàng)新互聯(lián)總部坐落于成都市區(qū),致力網(wǎng)站建設(shè)服務(wù)有成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、小程序開(kāi)發(fā)、軟件開(kāi)發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè),為互聯(lián)網(wǎng)品牌在互動(dòng)行銷(xiāo)領(lǐng)域創(chuàng)造價(jià)值而不懈努力!

之前為公司搭建了套webpack多頁(yè)面應(yīng)用腳手架,起初用得挺爽,資源整合打包,組件化開(kāi)發(fā),各種組件復(fù)用,需要什么就拿什么,后來(lái)入口有50個(gè)頁(yè)面了,慢慢的發(fā)現(xiàn)了每次按保存后的熱加載等待時(shí)間越來(lái)越長(zhǎng),需要等待10幾秒,實(shí)在太影響開(kāi)發(fā)效率,于是我查找原因。

觀察發(fā)現(xiàn),每次到熱加載時(shí)會(huì)在emitting HtmlWebpackPlugin這停留很久。

webpack多入口熱加載很慢的原因是什么

于是我想知道它到底停留了多長(zhǎng)時(shí)間呢?

在package.json內(nèi)加入--profile,它會(huì)告訴你編譯過(guò)程中哪些步驟耗時(shí)最長(zhǎng)。

webpack多入口熱加載很慢的原因是什么

停止npm,重新運(yùn)行webpack-dev-server,修改下文件按保存,觀察控制臺(tái),發(fā)現(xiàn)總花費(fèi)時(shí)長(zhǎng)為15035毫秒,在emitting就花費(fèi)了13239毫秒,這emitting應(yīng)該就是指上面的圖片的emitting HtmlWebpackPlugin了,看來(lái)我們解決HtmlWebpackPlugin,熱加載速度就能恢復(fù)正常了。

webpack多入口熱加載很慢的原因是什么

HtmlWebpackPlugin就是我們?nèi)肟趯?duì)應(yīng)的的html頁(yè)面,new的頁(yè)面越多,熱加載速度就會(huì)越慢。

webpack多入口熱加載很慢的原因是什么

我嘗試注釋掉所有html頁(yè)面,只留下一個(gè)案例詳情html頁(yè)面,重新啟動(dòng)webpack-dev-server,修改文件按下保存,發(fā)現(xiàn)速度驚人,只用了772毫米,看來(lái)問(wèn)題出在html-webpack-plugin這個(gè)插件上。

webpack多入口熱加載很慢的原因是什么

webpack多入口熱加載很慢的原因是什么

難道是我的html-webpack-plugin配置有問(wèn)題嗎,于是我在網(wǎng)上尋找解決辦法,做了各種嘗試,直到我找到html-webpack-plugin的github上放棄尋找了,原來(lái)插件作者有發(fā)布幾十條lssues(鏈接https://github.com/jantimon/html-webpack-plugin/issues),其中就包括該插件的多頁(yè)面性能問(wèn)題。

webpack多入口熱加載很慢的原因是什么

我嘗試點(diǎn)進(jìn)問(wèn)題談?wù)摾锩婵戳丝矗锩娴恼務(wù)撘呀?jīng)不能算是怎樣配置html-webpack-plugin插件了,涉及webpack底層的東西,覺(jué)得沒(méi)必要去深究了,也讓人不得不思考webpack現(xiàn)在是否適合多頁(yè)面開(kāi)發(fā)啊。。

總結(jié):

1、HtmlWebpackPlugin除了正在開(kāi)發(fā)的頁(yè)面,其它注釋掉。

2、等待插件作者修復(fù)此問(wèn)題。

以上是“webpack多入口熱加載很慢的原因是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!

網(wǎng)站欄目:webpack多入口熱加載很慢的原因是什么-創(chuàng)新互聯(lián)
路徑分享:http://bm7419.com/article36/ipssg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站改版、品牌網(wǎng)站建設(shè)動(dòng)態(tài)網(wǎng)站

廣告

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

成都seo排名網(wǎng)站優(yōu)化