42 webpack优化-自动刷新优化

最新推荐文章于 2025-04-10 16:07:48 发布

render-ydb

最新推荐文章于 2025-04-10 16:07:48 发布

阅读量318

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.youkuaiyun.com/sinat_41212418/article/details/121962352

版权

webpack 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何通过调整Webpack DevServer的inline配置来优化项目的构建速度和刷新机制。当将inline设置为false时，页面通过iframe加载内容，减少了Chunk注入，从而显著提升了构建速度，从3000ms降低到1600ms。同时，页面刷新通过https://localhost:8080/webpack_dev_server/live.bundle.js实现。这种方法降低了项目的启动时间和资源消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动刷新优化

控制刷新方式的就是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在项目启动的时候会自动加载。