优化开发环境打包构建速度-HMR

问题:
1.当我们修改了某个资源文件后,项目中整个其他的所有文件都需要重新打包,速度会很慢。

HMR是什么?

hot-module-replacement:热模块替换
作用:当一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块),极大提高打包构建速度。

怎么使用HMR?

devServer:{hot:true,//开启HMR功能};

三种文件的HMR功能

1. 样式文件

可以使用HMR功能,因为style-loader内部实现了

2. js文件

默认没有HMR功能。需要修改js代码,添加支持HMR功能的代码。
注意:HMR功能对js文件,只能处理非入口其他js文件。因为入口文件会将其他js文件引入,一旦其它文件变化,入口js文件也会变化重新加载。
解决:

//index.js文件
if(module.hot){
    //一旦module.hot为true,说明开启了HMR功能-->让HMR功能生效
module.hot.accept('./print.js',function(){
        //方法会监听print.js文件的变化,一旦发生变化,其他模块不会重新打包构建
        //后面会执行回调函数
        print();
    }
}

3. HTML文件

默认没有HMR功能,同时会导致HTML文件不能热更新了~(本地写的代码并没有重新编译,重新刷新浏览器)解决:改变entry入口文件,将HTML文件引入,这样配置才能生效。
由于一个项目中HTML文件一般只有一个,所以不需要HMR功能。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容