优先考虑性能可以改善用户体验，并有助于确保它们可以被尽可能多的人使用。在本文中，Michelle Barker 将带您了解一些前端优化技巧，以尽可能保持我们的 Vue 应用程序高效。 单页应用程序 (SPA)在处理实时动态数据时可以提供丰富的交互式用户体验。但它们也可能很重、臃肿且性能不佳。在本文中，我们将介绍一些前端优化技巧，以保持我们的 Vue 应用程序相对精简，并仅在需要时发布我们需要的 JS。 注意：假定您对Vue和 Composition API 有一定的了解，但无论您选择何种框架，都希望能学到一些有用的知识。 作为Ada Mode的前端开发人员，我的工作涉及构建 Windscope，这是一个供风电场运营商管理和维护其涡轮机队的 Web 应用程序。
由于需要实时接收数据并且
需要高水平的交互性，因此该项目选择了 SPA 架构。我们的网络应用程序依赖于一些繁重的 JS 库，但我们希望通过尽可能快速高效地获取数据和呈现来为最终用户提供 乌克兰 WhatsApp 号码列表 最佳体验。 选择一个框架 # 我们选择的 JS 框架是 Vue，部分选择是因为它是我最熟悉的框架。与 React 相比，以前 Vue 的整体包大小更小。然而，自最近的 React 更新以来，天平似乎已经向有利于 React 的方向转变。这并不重要，因为我们将在本文中了解如何只导入我们需要的内容。这两个框架都有出色的文档和庞大的开发人员生态系统，这是另一个考虑因素。Svelte是另一种可能的选择，但由于不熟悉，它需要更陡峭的学习曲线，而且由于更新，它的生态系统不太发达。
作为演示各种优化的示例
我构建了一个简单的 Vue 应用程序，它从 API 获取数据并使用D3.js呈现一些图表。 使用一些图表可视化 Vue 应用程序 （大预览） 注意：请参阅示例 GitHub 存储库以获 BTC 数据库欧盟 取完整代码。 我们正在使用Parcel，一个最小配置的构建工具，来捆绑我们的应用程序，但我们将在此处介绍的所有优化都适用于您选择的任何捆绑器。 使用构建工具进行 Tree Shaking、压缩和缩小 # 只发布您需要的代码是一种很好的做法，而且开箱即用，Parcel 在构建过程中删除未使用的 Javascript 代码（摇树）。它还缩小了结果，并且可以配置为使用 Gzip 或 Brotli 压缩输出。 除了缩小，Parcel 还在其生产过程中使用范围提升，这有助于提高缩小的效率。