动态加载

一个简单的业务场景

import VueRouter from 'vue-router'
import Detail from './views/UserDetails.vue'
const About = () => import('./views/AboutPage.vue')

const router = new VueRouter({
  routes:[
    {
      path:'/about',
      component:About
    },
    {
      path:'/detail',
      component:Detail
    },
  ]
})

export default router

路由加载

静态加载路由：

正常路由加载 webpack 不进行代码分割

import Detail from './views/UserDetails.vue'

路由懒加载 (opens new window) = 异步组件+webpack代码分割

const About = () => import('./views/AboutPage.vue')

在我们大多数的情况下，实际使用的是路由懒加载的一种方式

思考🤔：如果views下有 10000个文件，怎么写路由？

动态路由 (opens new window)

我们需要控制前端的路由权限，我们有时候需要后台保存每一个角色应该有的路由配置列表，所以需要动态的获取到他们应该能访问哪些路由。

但是我们的前端代码已经将所有的路由编译到了整个代码中，后端控制的只是是否注册到我们的路由列表中。只有注册了才能正常进行访问。

所以我们一个个将views下的文件都写成import的形式就没有必要，所以我们会使用匹配的模式来进行全量的导入

ES6 (推荐)

import() 中的表达式 (opens new window)

const component =  import(/* webpackChunkName: '[request]'*/ `./views${this.path}.vue`)

Webpack 不能在运行时再去加载任何模块，但是这个 import 值又必须在运行时已经知晓，那么我们就只能在编译时就找到符合这个动态导入功能可能性的所有值。

[魔法注释 (opens new window)

// 单个目标
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  'module'
);

// 多个可能目标
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

CommonJS (opens new window)

require(dependency: String);

以同步的方式检索其他模块的导出。由编译器(compiler)来确保依赖项在最终输出 bundle 中可用

问题背景：

Views文件下有几千个文件的时候，首次编译和修改编译以后，时间非常慢

原因分析：

1. 全局使用了 require('@/Views/'${path}) 来导入Views下的全量文件，
2. 这会导致首次编译的时候就会去Views下面递归找到所有的文件进行 全量的编译
3. 也会把所有的文件都编译到一个文件中 index[hash].js

加快编译？

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  configureWebpack:{
    module:{
      parser: {
        javascript: {
          wrappedContextRegExp: /.*/, // wrappedContextRegExp我们可以告诉 webpack 用什么替换表达式的动态部分
          wrappedContextRecursive: true // wrappedContextRecursive指定是否应该遍历嵌套目录
        }
      }
    }
  },
})

探讨 Webpack import 动态参数的四种方案 (opens new window)

import() (opens new window)

『Webpack系列』—— 路由懒加载的原理 (opens new window)