前端性能优化五十五：vue路由自动加载

import Router from 'vue-router'
// 单条路由添加和自动扫描可以同时使用，更灵活的控制路由范围
import Home from './views/Home.vue'

// 作用：扫描指定目录下所有符合条件的文件
// 函数的三个入参:
// 1. 要扫描的路径
// 2. 是否递归扫描：true递归扫描,扫描指定文件夹下的所有子文件夹、false只扫描指定路径
// 3. 正则表达式：/\.router\.js$/表示匹配以.router.js为结尾的文件
// 这里，正则表达式一定要和自己的路由信息配置文件的命名相符合，不然扫描不到
const modulesFiles = require.context('./modules', true, /\.router\.js$/)

const routers  = []
// 将扫描到的路由信息加入路由数组中
modulesFiles.keys().forEach(modulePath => {
  const value = modulesFiles(modulePath)
  routers.push(value.default)
})

// 如果有的路由配置文件中所编写的路由信息不止一个(是个数组)
// function registerRoute(route) {
//   routes.push(route)
// }
// modulesFiles.keys().forEach(modulePath => {
//   const value = modulesFiles(modulePath)
//   if (value.default instanceof Array) {
//     value.default.forEach(registerRoute)
//   } else {
//     registerRoute(value.default)
//   }
// })

export default new Router({
  routes: [
    ...routers,
    // {
    //   这里配置单条路由数据
    // }
  ]
})

注:
①. require.context:
    a. 一个webpack的api
    b. 通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块
    c. 在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api
    d. 可以遍历文件夹中的指定文件,再自动导入,不需要每次显式的调用import导入模块

②. 参数:
    a. directory {String} -读取文件的路径,检索的目录
    b. useSubdirectories {Boolean} - 是否遍历文件的子目录
    c. regExp {RegExp} - 匹配文件的正则表达式,个别是文件名

③. 语法:
    a. require.context(directory, useSubdirectories = false, regExp = /^.//);

---

2. 思考:

类似nuxt那样的约定式路由:

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = []; // 路由配置表

require
  .context("../views", true, /\.vue$/) 
  .keys()
  .map((item) => {
    let path = item.slice(1).replace(".vue", "").toLowerCase();
    routes.push({
      path,
      name: path.slice(1),
      component: () => import(`../views${item.slice(1)}`),
    });
  });

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;