Web前端热更新

时间 2019-11-16

标签 web 前端更新栏目 HTML 繁體版

原文原文链接

热更新是什么？

简单来讲，热更新通常是指手机里的app有小规模更新，以直接打补丁的形式更新。
相对应的，另外一种更新方式就是下载新的安装包，从新安装。
因此热更新在手游里头是比较常见的，毕竟游戏应用个个都几百兆起步。css

那Web前端有热更新？

按上面那个说法，Web应该是不存在热更新的。
由于网页的架构是B/S，即浏览器+服务器，它不像手机app同样是 C/S 客户端+服务器
因此在网页这一块是没法推送补丁让浏览器去更新的。html

那为何我搜前端热更新有好多文章在讲？

网上大多数前端热更新讲的都是热加载 hot-loader 或者是模块热更替 HMR前端

热加载是什么？

问题背景
前端页面是由 HTML+CSS+JavaScript 组成的，咱们前端开发页面调试的时候，
通常是这样：编辑器修改保存 --> 切换浏览器刷新
ps:因此前端汪F5键是用得最多的。
怎么解决
能不能我这边修改完，浏览器就自动从新加载那些修改过的文件？
想要解决这个问题，那么咱们就要去检测代码文件是否修改了，而后通知浏览器去从新加载。
那咱们就须要一个浏览器与服务器之间的通讯机制。
在早期，浏览器与服务器间的通讯机制就只有http协议，可http协议是无状态协议，这就很尴尬了，并且服务器没法主动给浏览器发消息，那就能浏览器不断跟服务器请求。
还好在HTML5里头添加了websocket
websocket 是一种容许浏览器与服务器间创建tcp长连接的通讯机制
tcp协议：双向通讯，有状态
这样的话，咱们就能够经过服务器检测文件修改，有修改了，咱们就通知浏览器，没有咱们就不通知。

因此大概流程就以下：vue

服务器检测代码是否修改了
修改了通知浏览器
浏览器根据修改的文件状况选择局部刷新或全局刷新

具体实例

vue-loader
webpack-dev-server
根据配置能够开启HMR模块
官方文档：doc.webpack-china.org/guides/hot-…
我的小demo: gitee.com/gitzt/webpa…

试一下

package.json 配置文件

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack",
  "server": "webpack-dev-server --open",
  "server-hot": "webpack-dev-server --hot"
},复制代码

webpack.config.js 配置文件

//  本地开发服务器
  devServer: {
      //  本地服务器加载资源所在路径
      contentBase: "./public",
      //  true 表示全部跳转都是index.html
      historyApiFallback: true,
      //  当源文件修改时，自动刷新页面
      inline: true,
      //  端口号，若不设置，默认为8080
      port: 3000,
  },复制代码

因此咱们在webpack-demo目录下，运行npm run server就等于运行了webpack-dev-server --open
这样咱们就启用了webpack-dev-server可是咱们配置项没有配置启用HMR
因此当你修改了文件时，它只是从新打包了，并通知浏览器重载一遍页面。

$ npm run server是我执行的命令，根据package.json 配置文件这个命令等同于webpack-dev-server --open
下面那些输出语句，一些是webpack-dev-server启用状态，还有webpack的打包文件的打包过程node

为何输出的是这个？

webpack.config.js 配置文件

module.exports = {
  //  入口文件
  entry: __dirname + "/app/main.js",
  //  输入文件
  output: {
      //  输出路径
      path: __dirname + "/public",
      //  输出文件名
      filename: "bundle.js"
  },复制代码

/app/main.js文件

//  ES6导入模块的语法，因此入口文件跟下面两个文件有关联
import hello from "./hello";
import "./main.css";
//  简单的DOM操做
document.querySelector("#root").appendChild(hello());复制代码

/app/hello.js文件

import style from "./style.css";
//  下面这个是CommonJS的文件导入，由于node.js自己是支持CommonJS的
let test = require("./test.json");
//  这个是CommonJS的模块导出
module.exports = function () {
let hello = document.createElement('div');
hello.textContent = test.hhh;
//  这里的hello这个元素的class的取值是来自上面导入"./style.css"文件，这涉及到CSS模块
hello.className = style.hello;
return hello;
};复制代码

/app/main.css文件

body{
  color: blue;
  font-size: 64px;
}复制代码

/app/style.css文件
```
.hello{
  color: red;
}复制代码
```

/app/test.json文件

{
  "hhh":"this a message from .json"
}复制代码

哦，还有index.html文件webpack

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack demo</title>
</head>
<body>

  <div id="root">
  </div>
  <script src="bundle.js"></script>
</body>
</html>复制代码

这样应该很清晰了吧
首先入口文件main.js引入了hello.js和main.css
而后hello.js又引入了style.css和test.json
因此上面这些与入口文件有直接联系或间接联系的文件都会经过webpack去打包，输出为一个bundle.js
而index.html是引用了bundle.js文件的，因此就出现了这个效果。git

你好像没讲到webpack-dev-server的做用哦

咱们上面运行的是没有启用HMR，因此这时候咱们修改main.css文件

body{
  color: blue;
  /* font-size: 64px; */ 
}
你会看到终端webpack在从新打包，打包完后浏览器自动刷新了页面，而后字体变成默认大小复制代码

若是启用了HMR呢？
这时候咱们要用到的命令是$ npm run server-hot
一样修改main.css文件，咱们会发现字体大小变了，但是浏览器并无刷新，并且发现改一次就多一个js文件，页面只是局部刷新

那是否是用了HMR就能够实现任何修改都是局部刷新呢？
不是的。
若是只是修改了CSS样式，那能够经过JS以打补丁的形式去进行替换样式。并且也不是说改样式就都能实现局部刷新，若是你改的是style.css这个文件，它的结果是会从新加载页面，为何呢？由于style.css这里头用到了CSS模块的东西，因此没办法说直接打个补丁就能搞定。

结论

热加载这个东西，首要就是靠服务器与浏览器之间的通讯，有了通讯才能通知浏览器何时去刷新，而刷新又分全局和局部，这个要看服务端改了哪些代码文件，而这些文件若是能够局部刷新就局部刷新，不行的话就只能从新加载页面了。github

参考资料

前端开发热更新原理解读web