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ò)營銷策劃、網(wǎng)頁設(shè)計、網(wǎng)站維護、公眾號搭建、小程序開發(fā)、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動行銷領(lǐng)域創(chuàng)造價值而不懈努力！

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

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

于是我想知道它到底停留了多長時間呢？

在package.json內(nèi)加入--profile，它會告訴你編譯過程中哪些步驟耗時最長。

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

HtmlWebpackPlugin就是我們?nèi)肟趯?yīng)的的html頁面，new的頁面越多，熱加載速度就會越慢。

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

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

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

總結(jié)：

1、HtmlWebpackPlugin除了正在開發(fā)的頁面，其它注釋掉。

2、等待插件作者修復此問題。

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

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站改版、品牌網(wǎng)站建設(shè)、動態(tài)網(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)