優(yōu)化開發(fā)環(huán)境打包構(gòu)建速度-HMR

問題:
1.當(dāng)我們修改了某個(gè)資源文件后,項(xiàng)目中整個(gè)其他的所有文件都需要重新打包,速度會很慢。

HMR是什么?

hot-module-replacement:熱模塊替換
作用:當(dāng)一個(gè)模塊發(fā)生變化,只會重新打包這一個(gè)模塊(而不是打包所有模塊),極大提高打包構(gòu)建速度。

怎么使用HMR?

devServer:{hot:true,//開啟HMR功能};

三種文件的HMR功能

1. 樣式文件

可以使用HMR功能,因?yàn)閟tyle-loader內(nèi)部實(shí)現(xiàn)了

2. js文件

默認(rèn)沒有HMR功能。需要修改js代碼,添加支持HMR功能的代碼。
注意:HMR功能對js文件,只能處理非入口其他js文件。因?yàn)槿肟谖募⑵渌鹙s文件引入,一旦其它文件變化,入口js文件也會變化重新加載。
解決:

//index.js文件
if(module.hot){
    //一旦module.hot為true,說明開啟了HMR功能-->讓HMR功能生效
module.hot.accept('./print.js',function(){
        //方法會監(jiān)聽print.js文件的變化,一旦發(fā)生變化,其他模塊不會重新打包構(gòu)建
        //后面會執(zhí)行回調(diào)函數(shù)
        print();
    }
}

3. HTML文件

默認(rèn)沒有HMR功能,同時(shí)會導(dǎo)致HTML文件不能熱更新了~(本地寫的代碼并沒有重新編譯,重新刷新瀏覽器)解決:改變entry入口文件,將HTML文件引入,這樣配置才能生效。
由于一個(gè)項(xiàng)目中HTML文件一般只有一個(gè),所以不需要HMR功能。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容