高水平的交互性，因此该项目选择了 SPA 架构。我们的网络应用程序依赖于一些繁重的 JS 库，但我们希望通过尽可能快速高效地获取数据和呈现来为最终用户提供最佳体验。 选择一个框架 # 我们选择的 JS 框架是 Vue，部分选择是因为它是我最熟悉的框架。与 React 相比，以前 Vue 的整体包大小更小。然而，自最近的 React 更新以来，天平似乎已经向有利于 React 的方向转变。这并不重要，因为我们将在本文中了解如何只导入我们需要的内容。这两个框架都有出色的文档和庞大的开发人员生态系统，这是另一个考虑因素。Svelte是另一种可能的选择，但由于不熟悉，它需要更陡峭的学习曲线，而且由于更新，它的生态系统不太发达。
作为演示各种优化的示例
我构建了一个简单的 Vue 应用程序，它从 API 获取数据并使用D3.js呈现一些图表。 使用一些图表可视化 Vue 应用程序 （大预览） 注意：请参阅示例 GitHub 存储库以获 取完整代码。 我们正在使用Parcel，一个最小配置的构建工具，来捆绑我们的应用程序，但我们将在此处介绍的 纳米比亚电话号码表 所有优化都适用于您选择的任何捆绑器。 使用构建工具进行 Tree Shaking、压缩和缩小 # 只发布您需要的代码是一种很好的做法，而且开箱即用，Parcel 在构建过程中删除未使用的 Javascript 代码（摇树）。它还缩小了结果，并且可以配置为使用 Gzip 或 Brotli 压缩输出。 除了缩小，Parcel 还在其生产过程中使用范围提升，这有助于提高缩小的效率。
范围提升的深入指南超出了本
文的范看我在那里做了什。尽管如此，如果我们使用–no-optimize和–no-scope-hoist标志在我们的示例应用程序上运行 Parcel 的构建过程，我们可以看到生成的包比优化和 BTC 数据库欧盟 缩小版本高大约 5 倍。因此，无论您使用哪个捆绑器，可以公平地说，您可能希望确保它执行尽可能多的优化。 但工作并没有就此结束。即使我们整体上发布了一个较小的包，浏览器仍然需要时间来解析和编译我们的 JS，这会导致用户体验变慢。这篇关于Calibre 的Bundle Size Optimization 的文章解释了大型 JS 包如何影响性能指标。 让我们看看我们还能做些什么来减少浏览器必须做的工作量。 跳转后更多！继续往下看↓ 认识图像优化，Addy Osmani 全新的实用指南，用于在网络上优化和交付高质量图像。
