当“挪动优先”（mobile-first）的体式格局逐步成为一种规范，而不肯定的收集环境要素应当始终是我们斟酌的一点，因而坚持让运用程序疾速加载变得愈来愈难题。在本系列文章中，我将深入研究Vue机能优化手艺，我们在 Vue Storefront 中已运用了这些手艺，您也可以在Vue.js运用程序中运用这些手艺，使它们可以马上加载并顺遂运转。我的目的是使本系列成为关于Vue运用程序机能的完全指南。

• Part 1 — Introduction to performance optimization and lazy loading.
• Part 2 — Lazy loading routes and vendor bundle anti-pattern.
• Part 3 — Lazy loading Vuex modules
• Part 4 — Delivering good waiting experience and lazy loading individual components — soon
• Part 5 — Lazy loading libs and finding smaller equivalents — soon
• Part 6 — Performance-friendly usage of UI libraries
• Part 7 — Making use of Service Worker cache — soon
• Part 8 — Prefetching

Webpack 打包事情道理

本系列的大部份妙技将集中于使我们的JS包更小。要明白这一点，起首我们须要明白 Webpack 是怎样打包（bundling）我们一切的文件的。当打包我们的资本时，Webpack 创建了被成为依靠图（dependency graph）的东西，它是一个基于进口，链接我们一切文件的图。假定我们在webpack设置中指定了一个名为 main.js 的文件作为进口点，它将是依靠关联图的根。如今，我们将在此文件中导入的每一个js模块将成为图中的节点，并且在此节点中导入的每一个模块都将成为其节点。Webpack 恰是运用这个依靠关联图来检测输出的包中应当包括哪些文件。输出包只是一个包括依靠关联图中一切模块的 Javascript 文件（或背面的部份将看到多个）。

我们可以图解这个历程，像如许：

如今，当我们晓得打包是怎样事情的，很明显我们的项目越多，初始的 javascript 包体积会变的越大。包太大，下载和剖析的时刻就会越长，用户过很长时刻才看到有意义的东西。用户守候的时刻越长，他/她就越有能够脱离我们的网站。

简而言之，更大的bundle = 更少的用户。至少在大多数情况下是如许。

耽误加载

因而，当我们依然须要增加新特征和革新运用程序时，我们怎样可以削减包的大小？答案很轻易-耽误加载和代码支解。

望文生义，耽误加载就是耽误加载运用程序的某些部份。换句话说，只要在我们真正须要的时刻才加载它们。代码支解就是将运用程序支解成这些耽误加载的块。

在大多数情况下，您不须要在用户接见您的网站后马上从Javascript文件中取得一切代码。纵然我们的运用程序中会有3个差别的路由，不论用户终究会在哪一个路由上，他/她老是须要下载、剖析和实行文件中三个路由的代码，即便是只须要接见一个路由。何等浪费时刻和精神！

耽误加载许可我们支解包（split the bundle），并只提供所须要的部份，如许用户就不会浪费时刻下载和剖析不被运用的代码。

要检察我们的网站实际运用了若干JavaScript代码，我们可以到开发者东西 -> cmd+shift+p -> type coverage -> 点击 ‘record’。如今我们应当可以看到实际运用了若干下载的代码。

一切标记为赤色的东西都是当前路由上不须要的，可以耽误加载。假如您正在运用源码映照（source maps ），您可以单击此列表中的任何文件，检察它的哪些部份没有被挪用。我们可以看到，纵然是 vuejs.org 也有很大的革新空间。

经由过程耽误加载恰当的组件和库，我们想法将 Vue Storefront 的文件大小削减了60％！

好了，我们晓得什么是耽误加载，它异常有效。

如今来看看怎样在Vue.js运用程序中运用它。

动态导入 （Dynamic imports）

我们可以轻松地用 webpack dynamic imports 加载运用程序的某些部份。让我们看看它们是怎样事情的，以及它们与通例导入有何差别。

假如我们将以如许的规范体式格局导入JS模块：

// main.js
import ModuleA from './module_a.js'
ModuleA.doStuff()

它将作为 main.js 的一个节点增加到依靠关联图中，并与之打包在一同。

然则，假如我们仅在某些情况下须要 ModuleA，比方对用户交互的相应，那该怎么办呢？将这个模块与初始文件打包在一同不是一个好主意，由于能够基础不须要它。我们须要一种要领来通知运用程序什么时候应当下载这段代码。

这就是动态导入可以协助我们的处所!如今看看这个例子：

//main.js
const getModuleA = () => import('./module_a.js')
// 作为对某些用户交互的相应挪用
getModuleA()
  .then({ doStuff } => doStuff())

让我们疾速看看这里发生了什么：

我们没有直接导入 module_a.js，而是创建了一个返回 import() 函数的函数。如今webpack将动态导入模块的内容打包到一个零丁的文件中，除非函数被挪用，不然不会导入也不会下载文件。在稍后的代码中，我们下载了这段可选代码，作为对某些特定用户交互的相应(如路由变动或单击)。

经由过程动态导入，我们基本上隔离了将增加到依靠关联图中的给定节点(在本例中是 module_a)，并在肯定须要时下载这一部份(这意味着我们还切断了在module_a.js中导入的模块)。

让我们看另一个例子，它将更好地申明这类机制。

假定我们有4个文件: main.js, module_a.js、module_b.js 和 module_c.js。要相识动态导入的事情道理，我们只须要 main 和 module_a 的源代码:

//main.js
import ModuleB from './mobile_b.js'
const getModuleA = () => import('./module_a.js')
getModuleA()
  .then({ doStuff } => doStuff()
)
//module_a.js
import ModuleC from './module_c.js'

经由过程使 module_a 成为一个动态导入的模块，我们把 module_a 及其一切的子模块从依靠图切割成一部份。当 module_a 被动态导入时，它与个中导入的模块一同加载。换句话说，我们只是为依靠关联图创建了一个新的进口点。

这就是我们的依靠关联图和文件包在给定设置下的模样。

耽误加载Vue组件

我们晓得什么是耽误加载，以及为何须要它。如今看看怎样在Vue运用程序中运用它。

好消息是它异常简朴，我们可以耽误加载全部SFC（译者注：Vue Single-File Component — 单文件组件）以及它的css和html，语法与之前如出一辙！

const lazyComponent = () => import('Component.vue')

这就是你所须要的！ 如今只要在要求时才会下载组件。 以下是挪用Vue组件动态加载的最经常使用要领：

• 挪用带有导入的函数

const lazyComponent = () => import('Component.vue')
lazyComponent()

• 组件要求后衬着

<template>
  <div> 
    <lazy-component />
  </div>
</template>
<script>
const lazyComponent = () => import('Component.vue')
export default {
  components: { lazyComponent }
}
</script>

请注意，只要当组件被要求要在模板中衬着时，才会挪用 lazyComponent 函数。
比方下面的代码：

<lazy-component v-if="false" /> 

如许不会动态导入组件，由于它并没有增加到DOM中(然则当值变成true时就会动态导入，这是一种耽误加载Vue组件的好要领)。

总结

耽误加载是进步web运用程序机能并削减其大小的最好要领之一。我们进修了怎样运用Vue组件的耽误加载。在本系列的下一部份中，我将向您展现怎样运用 Vue-router 和 async 路由来支解Vue运用程序代码。

假如对你有协助，请关注【前端妙技解锁】：