Vue.js App Performance Optimization: part 2— Lazy loading routes and vendor bundle anti-pattern.

未分类

在前一篇文章中，我们学习了什么是代码分割，它如何与Webpack一起工作，以及如何在Vue应用程序中使用延迟加载。现在，我们将更深入地研究代码，并学习用于分割Vue.js应用程序最实用的模式。

本系列文章基于对 Vue Storefront 性能优化过程的学习。通过使用下面的技术，我们能够将初始文件的大小减少70%，并在眨眼间使其加载。

应用程序增长的问题

Vue-router 是一个库，它允许将我们的web应用程序自然地分割成单独的页面。每个页面都是与某个特定URL路径相关联的路由。

（有待翻译）了解了这一点，假设我们有一个简单的组合应用程序，其结构如下:

整个JS代码打包在一个文件中 - app.js

你可能已经注意到，我们正在访问的路径，可能不需要 Home.vue 或 About.vue（和它依赖的lodash），但它们都在相同的 app.js 包中，无论路由用户访问哪一个路径（route 待商榷），都会被下载访问。多么浪费下载和解析时间啊!

如果我们下载一个额外的路由，这并不是什么大不了的事，但你可以想象这个应用会变得越来越大，任何新的增加将意味着在首次访问时要下载更大的文件。

This is not acceptable when only 1 second is enough for the user to do a mental context switch and (potentially) leave our website!

使用vue-router进行基于路由的代码分割

为了避免让应用程序变得更糟，我们只需要使用上一篇文章中学习的动态导入语法为每个路由创建单独的包。

（斟酌）像在Vue.js中很容易实现延迟加载组件一样，我们要做的不是直接将组件导入到route对象中，而是传递一个动态导入函数，只有在解析给定路由时，才会下载路由组件。

所以不要像这样静态导入路由组件：

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 与 home 页绑定，只有在输入 / 路径时才被下载
• about.js 与 about 页绑定（它依赖于lodash），只有在输入 /about 路径时才会被下载。

为了便于理解，文件名称并不是由webpack生成的真实名称。实际上是根据webpack配置生成 0.js 1.js 等，具体取决于您的webpack配置。

这种技术几乎适用于所有的应用，并且可以产生非常好的效果。

在许多情况下，基于路由的代码分割将解决所有的性能问题，并且可以在不到几分钟的时间内应用到几乎任何应用程序中!

Vue生态系统中的代码拆分