devserver之自动刷新

我们知道，webpack模块负责监听文件，webpack-dev-server模块则负责刷新浏览器，本文则详细讲述这两种原理

文件监听

相关配置

module.export = {
  // 只有开启监听模式时，watchoptions才有意义
  // 默认是 false，也就是不开启
  watch: true,
  // 监听模式开启时，watchOptions才有意义
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000
  }
}

工作原理

监听一个文件是否发生变化的原理是，定时获取这个文件的最后编辑时间，每次多存下最新的最后的编辑时间，如果发现当前获取的和最后一次保存的最后编辑时间不一致，就认为该文件发生了变化。

配置项中的watchOptions.poll用于控制定时检查的周期，具体含义是每秒检查多少次，判断文件是否发生变化是通过不停询问系统指定的文件有没有变化实现的，默认是每秒询问1000次。

当发现某个文件发生了变化，并不会立即告诉监听着，而是先缓存起来，收集一段时间的变化后，再一次性告诉监听者，配置选项watchOptions.aggregateTimeout 用于配置这个等待时间，默认是300ms，这样做的目的是，防止我们高频的输入文字，导致文件变化的事情高频率的发生。

ignored: /node_modules/是忽视node_modules下的文件，不监听他们，这也是对文件监听性能的一种优化，

监听优化

• watchOptions.aggregateTimeout的值越大性能越好，因为这能降低重构的频率

• watchOptions.poll的值越小越好，因为这能降低检查的频率，

但这两种优化方法的后果是监听模式的反应和灵敏度降低了。

自动刷新浏览器

注意：在使用webpack-dev-server模块去启动webpack模块时，webpack模块的监听模式默认会被开启。

自动刷新原理

控制浏览器刷新有以下三种方法：

• 借助浏览器扩展去通过浏览器提供的接口刷新，webstorm 的 liveEdit 功能就是这样实现的。

• 向要开发的网页中注入代理客户端代码，通过代理客户端去刷新整个页面。

• 将要开发的网页装进一个iframe中，通过刷新iframe去看到最新的效果

webpack支持第2、3种方法，第二种是devserver默认采用的刷新方法。

代理客户端方法的缺陷

在开启devserver.inline配置项时，devserver会向每个输出的chunk种注入代理客户端的代码，当我们的项目需要输出很多chunk时，就会导致构建缓慢，其实要完成自动刷新，一个页面至于要一个代理客户端，devserver之所以粗暴的为每个chunk都注入，是因为它不知道某个网页依赖了哪几个chunk，索性全部都注入一个代理客户端，网页只要依赖了其中任何一个chunk，代理客户端就被注入网页中。

使用iframe标签

我们可以关闭不够优雅的inline模式，只注入一个代理客户端，这种优化方式和上面不同之处在于，

• 入口网址由http://localhost:8080/变成了http://localhost:8080/webpack-dev-server/；

• bundle.js中将不再包含代理客户端的代码；

本质是，需要监听的 网页被放进了一个iframe中，编辑源码后，iframe会被自动刷新，这种优化效果在要输出的chunk数量越多 提升越明显

其他

如果不想以iframe的方式去访问，但同时想让网页保持自动刷新的功能，则需要手动向网页注入代理客户端的脚本，向index.html中插入以下标签：

<script src="http://localhost:8080/webpack-dev-server.js"></script>

向网页注入以上脚本后，独立打开的网页就能自动刷新了，但要注意在发布到线上时要删除点这段用于开发的代码

今天的文章devserver之自动刷新分享到此就结束了，感谢您的阅读。