Vue.js应用性能优化---1 介绍性能优化和懒加载

Vue.js

当“移动优先”（mobile-first）的方式逐渐成为一种标准，而且不确定的网络环境因素应该始终是我们考虑的一点，因此保持让应用程序快速加载变得越来越困难。在本系列文章中，我将深入研究Vue性能优化技术，我们在 Vue Storefront 中已经使用了这些技术，您也可以在Vue.js应用程序中使用这些技术，使它们能够立即加载并顺利运行。我的目标是使本系列成为关于Vue应用程序性能的完整指南。

Webpack 打包工作原理

本系列的大部分技巧将集中于使我们的JS包更小。要理解这一点，首先我们需要理解 Webpack 是如何打包（bundling）我们所有的文件的。当打包我们的资源时，Webpack 创建了被成为依赖图（dependency graph）的东西，它是一个基于入口链接我们所有文件的图。假设我们在webpack配置中指定了一个名为main.js的文件作为入口点，它将是依赖关系图的根。现在，我们将在此文件中导入的每个js模块将成为图中的节点，并且在此节点中导入的每个模块都将成为其节点。Webpack正是使用这个依赖关系图来检测输出的包中应该包含哪些文件。输出包只是一个包含依赖关系图中所有模块的Javascript文件（或后面的部分将看到多个）。

我们可以图解这个过程，像这样：

现在，当我们知道打包是如何工作的，很明显我们的项目越多，初始的 javascript 包体积会变的越大。包太大，下载和解析的时间就会越长，用户过很长时间才能看到有意义的东西。用户等待的时间越长，他/她就越有可能离开我们的网站。

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