使用 vue-cli 3、webpack 和 Vue Router 实现延迟加载组件

SPA（单页应用程序）通常由数十甚至数百个组件组成，这些组件可以分成几个 JavaScript 包文件。本文的目的是展示一种进行这种划分的方法，以及如何异步加载每个文件，只有当从路由更改请求组件时才加载。这种异步行为称为延迟加载，可以减小初始包的大小。

项目创建

我们来新建一个项目，按照以下命令使用vue-cli 3来创建：

$ vue create my-app
...
Vue CLI v3.0.0-beta.9
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

创建的项目有两个视图：Home.vue和About.vue。当我们运行项目时，通过yarn serve或npm run serve命令，可以通过顶部菜单访问视图，类似下图：

这两个文件Home.vue和About.vue是在应用程序初始化时加载的。对于包含大量组件的大型项目，一次加载所有文件通常不可行。我们需要在请求文件时加载它们。

我们可以轻松实现延迟加载，这要归功于webpack 即将支持的JavaScript 功能动态导入。目前，该文件有以下代码：src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

为了设置延迟加载，我们将src/router.js文件更改为以下内容：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

function loadView(view) {
  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

以下是我们所做的更改的详细说明：

home1-我们已经删除了和组件的静态导入about。

2-我们创建了该loadview函数，它使用该import函数动态导入 Vue 组件。

3- 在import函数中，我们用来/* webpackChunkName: "view-[request]" */标记将动态导入的每个文件的名称。

4-路由配置使用该loadView方法，传递组件的名称。

npm run build这样，当我们通过或编译项目时yarn build，我们会得到以下结果：

请注意，已创建两个文件：view-Home-vue...和view-About-vue...。它们将在生产服务器上按需加载：

动态导入和 ESLint

在撰写本文时，由于无法识别该import函数，因此出现了一个小的 ESLint，类似下图：

要修复此问题，请打开文件package.json并添加以下配置：

 "eslintConfig": {
    "root": true,
    "parserOptions": {"parser": "babel-eslint"},
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ]
  },