Vue.js应用性能优化：第二部分---路由懒加载和 Vendor bundle 反模式

0x584a 发布于2019-08-26 13:45 / 1243人阅读

摘要：现在，我们将更深入地研究，并学习用于分割应用程序最实用的模式。本系列文章基于对性能优化过程的学习。路径时才被下载。为了便于理解，文件名称并不是由生成的真实名称。接下来，我们将学习其他部分和多带带的组件也能够从主文件分割出来并延迟加载。

在前一篇文章中，我们学习了什么是代码分割，它是如何与 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和多带带的组件)也能够从主文件分割出来并延迟加载。

如果对你有帮助，请关注【前端技能解锁】：

GPU云服务器云服务器第二部分懒加载分页第二部懒加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109448.html

Vue.js应用性能优化：第一部分---介绍性能优化和懒加载

摘要：我的目标是使本系列成为关于应用程序性能的完整指南。代码分割就是将应用程序分割成这些延迟加载的块。总结延迟加载是提高应用程序性能并减少其大小的最佳方法之一。在本系列的下一部分中，我将向您展示如何使用和路由来分割应用程序代码。当移动优先（mobile-first）的方式逐渐成为一种标准，而不确定的网络环境因素应该始终是我们考虑的一点，因此保持让应用程序快速加载变得越来越困难。在本系列文章...

ZweiZhao 2019-08-26 18:27 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0
webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0