性能优化-HMR热替换

HMR热替换

HMR的配置只适用于开发环境,因为生产环境没有devServer

目录结构:

性能优化-HMR热替换

 

 

 之前使用的开发环境,如果修改了其中一个文件的代码,保存之后所有的文件都会进行一次重新编译,比如我们修改了css代码,但是js文件没有进行修改,但是保存之后,js文件也会重新进行编译

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <!-- 我是h1 -->
    <h1>12345789</h1>
</body>
</html>

index.css

div{
    width: 200px;
    height: 200px;
    border:1px solid #000;
    margin: 10px;
    background: blue;
  }
  

index.js

import './index.css';
import {a} from "../src/js/a.js"
console.log(a);

a.js

export const a = parseInt(Math.random() * 10)

此时浏览器的效果

性能优化-HMR热替换

 

 

 我们修改index.css文件的div的背景颜色为red

性能优化-HMR热替换

 

 

 会发现,不仅仅背景颜色发生了改变,并且a.js的随机数也发生了变化,这是因为一个文件发生了变化,所有的文件都重新编译了

热替换:也就是修改哪个文件,替换掉哪个文件,其他的文件不更新

 css文件的热更新

需要配置devServer的hot属为true即可

需要注意的是,css文件必须要使用style-loader,因为style-loader内部实现了相关的HMR的功能。我们之前的提取css文件mini-css-extract-plugin的loader是不能实现的

此时我们将index.css文件的颜色变为粉色

性能优化-HMR热替换

 

 

 js文件的随机数也没有发生变化

 js文件的热替换

js文件默认是没有热替换的,此时我们再新建一个b.js文件,和a.js文件是同目录

b.js文件

export const b = parseInt(Math.random() * 10)

index.js文件

import './index.css';
  import {a} from "../src/js/a.js"   import {a} from "../src/js/b.js"
console.log(a,'a');
console.log(b,'b');

随意修改任意一个js文件,所有的文件都会进行重新编译

在入口文件中配置热更新的相关代码

if (module.hot) {
  // 一旦module.hot为true了,表示开启了HMR的功能
  module.hot.accept("./b.js", function () {
    // accept方法会监听b.js文件,一旦这个文件发生了变化,此时其他的模块不会再次进行打包编译
    console.log(b, 'b');
  })
}

此时修改b.js文件

性能优化-HMR热替换

 html文件默认也是没有热替换功能的,并且html文件其实也不需要热替换功能,引入html文件大多数都是入口文件,我们的入口文件一旦进行了修改,势必所有的代码必须进行重新编译,因人index.html文件需要引入css、js等等文件,此时这个文件属于一个入口,一般不需要配置热替换

 

 

上一篇:vue 大型单页面项目开发时编译非常慢,有什么手段可以提高编译效率?已开启HMR


下一篇:Webpack中的sourceMap配置