使用 vue-cli 3、webpack 和 Vue Router 轻松加载组件

SPAs(单页应用程序)通常由数十个甚至数百个组件组成,可以分为几个JavaScript包文件。本文的目的是展示一种方法来做这个分割,以及如何以无同步的方式加载每个文件,只有当组件被要求从路线更改时。

项目创建

让我们开始一个新的项目,并使用 vue-cli 3按照以下命令创建它:

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

<$>[注] 提示:选择在 package.json 文件中组合所有配置规则。

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

这些两个文件,‘Home.vue’和‘About.vue’,在应用程序初始化时被加载.对于具有许多组件的非微妙项目,往往无法同时加载所有文件。

我们可以轻松地实现懒惰的加载,由于即将到来的JavaScript功能动态导入,即 webpack支持。

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3import Home from './views/Home.vue'
 4import About from './views/About.vue'
 5
 6Vue.use(Router)
 7
 8export default new Router({
 9  routes: [
10    {
11      path: '/',
12      name: 'home',
13      component: Home
14    },
15    {
16      path: '/about',
17      name: 'about',
18      component: About
19    }
20  ]
21})

要设置懒惰加载,我们将src/router.js文件更改为以下:

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3
 4Vue.use(Router)
 5
 6function loadView(view) {
 7  return () => import(/* webpackChunkName: "view-[request]" */ `@/views/${view}.vue`)
 8}
 9
10export default new Router({
11  routes: [
12    {
13      path: '/',
14      name: 'home',
15      component: loadView('Home')
16    },
17    {
18      path: '/about',
19      name: 'about',
20      component: loadView('About')
21    }
22  ]
23})

以下是我们改变了什么的分解:

1、我们已删除家和周围组件的静态导入。

我们创建了loadview函数,该函数使用import函数来动态导入Vue组件。

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

4、路由配置使用loadView方法,传递组件名称。

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

请注意,已经创建了两个文件:『view-Home-vue...』和『view-About-vue...』。

动态导入和ESLint

在此写作时,有一个小 ESLint,因为它无法识别导入函数,类似于下面的图:

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

1"eslintConfig": {
2    "root": true,
3    "parserOptions": {"parser": "babel-eslint"},
4    "extends": [
5      "plugin:vue/essential",
6      "eslint:recommended"
7    ]
8  },