在前一篇文章中，我们进修了什么是代码支解，它是怎样与 Webpack 一同事情的，以及怎样在Vue运用程序中运用耽误加载。如今，我们将更深切地研讨，并进修用于支解 Vue.js 运用程序最有用的形式。

本系列文章基于对 Vue Storefront 机能优化历程的进修。经由过程运用下面的手艺，我们能够将初始文件的大小削减70%，并在眨眼间使其加载。

• 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

运用程序增进的题目

Vue-router 是一个库，它许可将我们的web运用程序自然地支解成零丁的页面。每一个页面都是与某个特定URL途径相关联的路由。

了解了这一点，假定我们有一个简朴的运用程序，其构造以下:

全部JS代码打包在一个文件中 –  app.js

你能够已注意到，我们正在接见的途径，能够不须要 Home.vue 或 About.vue（和它依靠的lodash），但它们都在雷同的 app.js 文件中，不管用户接见哪个途径，都会被下载。何等糟蹋下载和剖析时候啊!

假如我们下载一个分外的路由，这并非什么大不了的事，但你能够设想这个运用会变得越来越大，任何新的增添将意味着在初次接见时要下载更大的文件。

仅仅一秒钟的时候足以让用户心思发生变化，并很有潜伏能够会脱离我们的网站，这是不能接收的。

来自 Ilya Grigorik 关于机能和人类感知的出色演讲

以上图片中涌现的英文译文：

• Wetware perception reaction times 人脑感知反应时候
• instant 马上
• slight perceptible delay 细微可察觉的耽误
• Task focus,perceptible delay 显著的耽误
• Mental context switch 心思发生变化
• I’ll come back later 我一会儿再来

基于路由的代码支解

为了防止让运用程序变得更糟，我们只须要运用上一篇文章中进修的动态导入语法为每一个路由建立零丁的包。

像在 Vue.js 中很轻易完成耽误加载组件一样，我们要做的不是直接将组件导入到路由对象中，而是通报一个 动态导入函数，只要在接见这个路由时，才会下载对应的路由组件。

所以不要像如许静态导入路由组件：

import RouteComponent form './RouteComponent.vue'
const routes = [{ path: /foo', component: RouteComponent }]

我们须要动态导入它，这将建立一个新的包，并将此路由作为进口点：

const routes = [
  { path: /foo', component: () => import('./RouteComponent.vue') }
]

知道了这些，让我们看看动态导入后打包的文件和路由是什么模样的:

运用这个设置，webpack 将建立三个包：

• app.js 我们的主文件，包括了运用程序进口点（main.js）和每一个路由所须要的库/组件。
• home.js/** 途径时才被下载。
• about.js/about** 途径时才会被下载。

_为了便于明白，文件称号并非由webpack天生的实在称号。实际上是依据webpack设置天生 0.js1.js** 等_，详细取决于您的webpack设置。

这类手艺险些适用于一切的运用，而且能够发生异常好的结果。

在很多情况下，基于路由的代码支解将处理一切的机能题目，而且能够在不到几分钟的时候内运用到险些任何运用程序中!

Vue生态体系中的代码拆分

你能够正在运用 Nuxt 或 vue-cli 来建立你的运用程序。假如是如许，主要的是要知道它们都有关于代码拆分的一些自定义行动：

• 在 vue-cli3prefetchingvue-cliprefetching** 的学问，请看这篇文章。
• 在 Nuxt路由体系，一切页面路由的代码支解都是开箱即用的。

如今让我们来看看异常盛行且常被用到的反形式（anti-pattern），它能够下降基于路由的代码支解的影响。

Vendor bundle 反形式

Vendor bundle 一般用于包括 node_modules 中的一切模块的零丁js文件。

虽然把一切文件都打包在一同，以便将一切依靠关联保存在一个处所并缓存它们能够很吸引人，但这类要领引入了我们将一切路由打包在一同时碰到的一样的题目：

你看到题目了吗?纵然我们只须要在一个路由中运用 lodash（它是个中一个依靠项），它就会被打包在 vendor.js 中以及一切其他依靠项中，因而它一直将会被下载。

将一切依靠项打包在一个文件入耳起来很吸引人，但这会延伸运用程序的加载时候。我们能够做得更好!

我们的运用程序运用基于路由的代码支解，就足以确保只下载所须要的代码。但这会致使一些代码反复。

假定 Home.vue 也须要 lodash。

在这类情况下，从 /about (about .vue) 跳转到 / (Home.vue) 将会下载 lodash 两次。

虽然依然比下载大批冗余代码要好，然则假如我们已知道了有这类依靠关联，那末做不到被重用就没有意义，对吧?

这就是 webpack splitChunksPlugin 能够协助我们的处所。只要在 webpack 的设置中增加下面这几行代码，我们就能够将大众依靠项分组到一个零丁的文件中，如许就能够被同享了。

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

在 chunk 属性中，我们只是通知 webpack 应当优化那些代码块。正如您能够已猜到的那样，将该属性设置为 all 意味着它应当优化一切依靠项。

您能够在 webpack文档 中浏览关于此历程的更多信息。

总结

按路由拆分代码是坚持初始加载文件大小较小的最好（也是最简朴）要领之一。接下来，我们将进修其他部份(Vuex和零丁的组件)也能够从主文件支解出来并耽误加载。

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