性能优化-HMR
在开发环境下,我们都是通过index,js作为入口文件的,那么就会存在一个问题,无论是css的改变还是依赖的js文件改变,无论是改变哪一个,其他的依赖文件都会被重新打包的,
试想以下:当有1000个js文件,1000个css文件互相依赖,但是开发者改变了其中一个文件,是不是其他的文件都要被重新打包一次,这样会不会太浪费性能了。
因此webpack提出,只有改变的文件需要重新打包,其他不变的文件不需要重新打包加载
这就需要了解HMR—热更新替换
HMR:hot module replacement,热更新替换
作用:只有改变的文件需要重新打包,其他不变的文件不需要重新打包加载
注意:配置更新,必须重启webpack
样式文件:因为style-loader内部实现了HMR功能
js文件:默认不支持HMR功能·,[用来处理非入口的文件的更新]
html文件:默认不支持HMR功能·,同时html文件不在进行热更新
解决:修改entry入口,将html文件引入
但是这样以后,发现js文件HMR正常,但是html还是不变,
原因:一个项目只有一个html,所以没有必要对html进行热更新
index.js
print.js