路由懒加载在开发环境下更新代码很长时间的解决方案_路由懒加载打包时间更长-优快云博客

本文链接：https://blog.youkuaiyun.com/qianduan1020/article/details/105274297

通过引入babel-plugin-dynamic-import-node插件，在开发环境下将import()转化为require()，以此解决路由懒加载导致的代码更新延迟问题。该方法对代码侵入性小，仅在dev模式下生效，路由配置保持不变。当不需要此方案时，从.babelrc的plugins中移除即可。适用于页面数量较多，热更新速度需求高的项目。

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

使用babel 的 plugins babel-plugin-dynamic-import-node。它只做一件事就是将所有的import()转化为require()，这样就可以用这个插件将所有异步组件都用同步的方式引入，并结合 BABEL_ENV 这个babel环境变量，让它只作用于开发环境下，在开发环境中将所有import()转化为require()，这种方案解决了之前重复打包的问题，同时对代码的侵入性也很小，你平时写路由的时候只需要按照官方文档路由懒加载的方式就可以了，其它的都交给babel来处理，当你不想用这个方案的时候，也只要将它从babel 的 plugins中移除就可以了。

具体代码：

首先在package.json中增加BABEL_ENV

"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

接着在.babelrc只能加入babel-plugin-dynamic-import-node这个plugins，并让它只有在development模式中才生效。

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

之后就大功告成了，路由只要像平时一样写就可以了。

 { path: '/login', component: () => import('@/views/login/index')}

tip:用户自己可以根据业务情况来衡量一下是否采用本方案，如果你的项目页面不超过几十个，本地开发热更新速度你还能接受的话，可以直接所有环境下都是用懒加载避免此副作用