性能优化-HMR热替换

HMR热替换

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

目录结构：

 

 

 之前使用的开发环境，如果修改了其中一个文件的代码，保存之后所有的文件都会进行一次重新编译，比如我们修改了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)

此时浏览器的效果

 

 

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

 

 

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

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

 css文件的热更新

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

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

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

 

 

 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文件

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

 

 

posted @ 2021-10-27 18:57  keyeking  阅读(82)  评论(0)  编辑  收藏  举报