webpck 之(13) 优化配置 之 HMR

这里只能对 开发环境有效

1.开发环境性能优化

*优化打包构建速度   (项目体积越来越庞大,代码量太多,就会越来越慢)

*优化调试代码

2.生产环境性能优化

*优化打包构建速度

*优化代码运行的性能

 

HRM是需要在devServer环境下的,而生产环境是没有这个环境的,所以在生产环境无法使用HRM

 

为什么要用到HRM呢?

答:因为在热更新devServer设置中,通过npx webpack-dev-server 进行内存打包,

     这样每次修改就不用执行webpack了,但是同样也会出现以下情况:

     1/修改样式文件 : 发现js文件重新加载了,被重新打包了一次,若js文件很多呢,那么内存打包会非常慢

     2.修改html文件: 会导致很多文件进行重新加载了,但是不需要考虑HRM

 通过下面的修改可以极大优化打包构建速度

 

 

HRM: hot module replacement 热模块替换 / 模块热替换

   作用: 一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块)

            极大提升构建速度

 

   样式文件:可以使用HMR功能:因为style-loader内部实现了,需要设置 devServer中hot:true

    js文件:  默认不能使用HRM功能,如何解决呢?

         在index.js中,利用 module.hot  以及 module.hot.accept('..js',function(){}) 来监听js文件的变化来执行回调函数

          js的HRM只是针对非入口js文件进行热模块替换   但是修改的是入口文件,就其他的js都要重新加载

    html文件: 默认不能使用HMR功能,同时会导致问题,html文件不能热更新了   (不需要做HMR功能,因为html只有这一个页面,即使做了HRM功能页无效)

            解决: 修改entry入口   代码: entry:['./src/js/index.js', './src/index.html']   但是这样做只是解决了html修改后,页面没有变化的问题, 而且修改html文件后,发现js等文件全部重新加载了

webpack.config.js文件  cssHRM很简单的配置 hot

devServer:{
    contentBase:resolve(__dirname,'build'),
    compress:true,
    port:3000,
    open:true,
    // 开启HMP功能
    //当修改了webpack配置,新配置要想生效,必须从新webpack服务
    hot:true
  }

 

index.js 文件  利用 module.hot等内容实现HRM

const print  = require('print')  //注:print.js只有一个print()函数方法

print()  //在index.js中调用print.js的方法

if(module.hot)
{
  module.hot.accept('./print.js',function(){
      //方法会监听 print.js文件的变化,一旦发生变化,其他模块不会打包重构
     //会执行后面的回调函数
    print()
  })
}