如何解决Vue工程项目热更新慢的问题

您所在的位置:网站首页 vue项目热更新速度太慢 如何解决Vue工程项目热更新慢的问题

如何解决Vue工程项目热更新慢的问题

2024-07-09 10:49| 来源: 网络整理| 查看: 265

目录文章目录隐藏解决思路解决效果解决方法从 babel 编译着手设置 .babelrc

今天在维护一个 Vue 的老项目,由于历史悠久,基础工程配置落伍的情况,导致 Vue 热更新非常慢。

如何解决 Vue 工程项目热更新慢的问题

解决思路

根据终端运行打印和日常开发经验猜测:应该是 babel 编译导致的;

解决效果

先上效果!!!

Vue 工程项目热更新慢解决办法

下面,我们就从这两个方面着手解决:

解决方法 从 babel 编译着手

安装动态编译插件 babel-plugin-dynamic-import-node ,解决项目过大,内容多导致的编译速度慢的问题。

这个插件是将现有项目中的 import() to a deferred require(),

这样就可以在编译中延迟项目中 import() 的引入。

npm install babel-plugin-dynamic-import-node --save-dev

安装动态编译插件报错

遇到问题不要怕

npm install babel-plugin-dynamic-import-node --save-dev --legacy-peer-deps

安装动态编译插件 成功

设置 .babelrc

设置 .babelrc

"development": { "plugins": [ "dynamic-import-node" ] }

至此,我们的项目从 2 分钟的编译时间下降到 1S 左右。

「点点赞赏,手留余香」

赞 2 赏

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

Babel babel编译 vue 前端 热更新 声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系[email protected]处理码云笔记 » 如何解决Vue工程项目热更新慢的问题 码云 会员 分享到:


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3