自动刷新优化

控制刷新方式的就是DevServer里面的inline配置，默认为true，所以默认自动刷新使用的代理客户端。其机制是为每一个Chunk注入代理客户端（因为DevServer不知道网页依赖哪些Chunk，所以就给每一个Chunk注入代码客户端代码），正因为如此，当我们项目输出很多Chunk的时候，就会导致构建缓慢。

当设置inline为false的时候，这个时候刷新机制就变成了通过刷新网页内嵌的iframe来达到刷新页面的效果。配置如下：

devServer: {
    open: true, // 项目启动时，自动打开默认浏览器
        https: true, // 使用https服务
            historyApiFallback: true,
                before(app) {
        proxy(app)
    },
    inline: false
}

设置该配置以后，检查项目网页结果，会发现网页是通过iframe加载我们要操作的内容，如下所示：

现在的构建速度得到了较大的提升，从之前的3000m左右减少到了1600ms左右。同时在关闭inline以后，项目的启动地址会变为https://localhost:8080/webpack-dev-server/。刷新功能则是通过https://localhost:8080/webpack_dev_server/live.bundle.js来完成的，此JavaScript在项目启动的时候会自动加载。