vue 文件太多懒加载过慢的问题

vue 文件太多懒加载过慢的问题

背景

项目中的路由达到了 300 多个，所以路由使用了懒加载的方式优化。
引发了开发的时候热更新特别慢（因为路由使用的懒加载，热更新的时候需要把内容重新准备一次，所以特别忙），卡在70%需要加载好一会才更新

遇到的坑

1. 测试环境热更新特别慢
2. 使用 () => import('文件名') 进行懒加载的时候打包不了（卡在某个进度不动了）

解决方法

测试环境热更新特别慢

根据开发环境区分 development(测试环境) 和 environment(生产环境)

• 测试环境使用一次性引入
• 生产环境使用懒加载

// 在 router/index.js 中定义一个 _import 方法
const _import =
  process.env.NODE_ENV === "development"
    ? path => require("@/view/" + path).default // 全部加载（dev环境使用）
    : path => import("@/view/" + path) // 按需加载（build时使用）

// component: _import('home/index/Index') // 路由应用的时候使用 _import 方法来引入组件

这里需要注意的地方

1. 在引入文件的时候，我用的是 @/view/" + path 因为如果在路由文件直接使用 @/view/对应文件路径 这个时候拿到的东西在传入 import 或 require 里面的时候，会提示路由找不到，因为直接写完整的路径有可能就已经转成了文件类型（个人猜测）。所以要用拼接字符串的

错误示范()：

const _import =
  process.env.NODE_ENV === "development"
    ? path => require(path).default // 全部加载（dev环境使用）
    : path => import(path) // 按需加载（build时使用）

component: _import("@/view/home/index/Index")

---

这一步优化搞定后，按正常来说，热更新就很快了
然后试下打包的功能，如果没问题那就正常了（因为我的项目 300 多个路由。。。所以引发了下面的问题）
打包的时候卡住了，根本打包不了

几经折腾，发现问题：import("@/view/" + path) 和 resolve => require(['@/view/' + path], resolve) 都是懒加载的一种方式（具体区别还没研究透，不过还是有区别的）

如果路由太多了，打包时候使用import方式懒加载，很有可能就打包失败了（进度条卡住不动了）
于是把懒加载方式在重新改一下

const _import =
  process.env.NODE_ENV === "development"
    ? path => require("@/components/" + path).default // 全部加载（dev环境使用）
    : path => resolve => require(["@/components/" + path], resolve) // 按需加载（build时使用）

---

至此，问题大概就解决了