就是这样，人！ 它已经到了。 本系列最需要的文章！ 我的系列文章的最后和第4部分“我如何为家居装饰品牌建立最快的电子商务商店”仅关注Web应用程序性能优化。 本文将帮助您如何提高Web应用程序的性能，以及一些技巧和优化技巧，以使它更上一层楼。 如果您还没有阅读前面的部分，请访问以下链接：

1.第一部分

2. 第2部分

3. 第3部分

我相信这篇文章将是您完成应用程序开发的艰苦部分并希望为最终用户提供更快，更流畅的体验之后的最终入门指南。

各种参数都涉及提高Web App性能。 但是在解决性能问题之前，您需要了解导致应用程序运行缓慢的根本原因。 以下主题是我们将在此处讨论的主题。

1.您的应用程序运行速度不如预期的3个原因

2.如何真正提高Web应用程序的性能？

在开始之前，我想告诉大家，我的下一篇文章将在“有用的工具和资源的终极清单上，以提高Web应用程序的性能”。 它将包括我在构建更快的Web应用程序中亲自使用的所有内容Visit- https://medium.com/better-programming/the-definitive-guide-to-boosting-your-web-application-performance-2b172574f37f

3个为什么您的应用程序运行速度不如预期的原因

1.捆束尺寸

捆绑包大小是您应用的生产版本的总大小。 建议束大小应小于644 Kb（未压缩）。 如果不是644 Kb，则必须设法将其至少保持在1000 Kb以下。

是什么导致高包装尺寸？

导入不必要的模块是导致捆绑包尺寸高的主要原因。 您应该仅导入所需的模块。 如果要仅使用该库中的button元素，请避免导入CSS库的整个程序包。 有时，即使您已将main.js / app.js文件拆分为多个块，index.html仍然会调用这两个文件，从而增加了页面加载时间。 它发生在我身上，所以我建议您在部署之前先看一下index.html文件。

2.未优化的图像

假设您的应用在移动设备和台式机上渲染相同的图像。 由于更大的显示器，台式机需要高分辨率的图像，但移动显示器则不是这种情况。 它们需要很小的空间来显示图像，因此有必要降低移动显示器的图像分辨率。 这种小的调整可以单独将图像尺寸减少30％到40％。 在本文中，我将回答如何大幅度减小图像尺寸。

3.大量的网络请求

Web应用程序正在通过向服务器发出的HTTP请求加载内容。 请求越多，完全呈现应用程序所花费的时间就越多。 您可以通过chrome开发人员工具中的“网络”标签对此应用进行调查。 基本上，限制在初始负载下传输的资源数量。 延迟加载路由是减少初始加载时发出的网络请求数量的好方法。

如何真正提高Web应用程序的性能？

1.代码拆分

代码拆分是提高Web应用程序性能的最有效方法。 使用捆绑程序构建应用程序时，JavaScript捆绑程序可能会变得很大，从而影响页面加载时间。 如果您可以将每个路线的组成部分拆分为一个单独的块，并且仅在访问路线时才加载它们，则效率会更高。 延迟加载路由是一种实现代码拆分的流行技术。 每个主要框架都有不同的方法来实现代码拆分，但是基本概念是相同的。

仅当您访问examplewebsite.com/0时，才调用与0.html相关的CSS，Js和Media内容。

有用的资源-https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/

https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

2.摇树

您是否知道导致应用程序捆绑包大小超过1000 kb的原因？ 您可能要在main.js中导入的NPM软件包过多！ 解决此问题的一个简单解决方案是使用ES模块。 使用ES模块时，Webpack可以进行树状摇动。 摇树是指捆绑器遍历整个依赖项树，检查使用了哪些依赖项，并删除未使用的依赖项。 因此，如果使用ES模块语法，则Webpack可以消除未使用的代码：

导入整个模块：

import * as myModule from '/modules/my-module.js' ;

使用ES模块命名为Import：

import {myExport} from '/modules/my-module.js'

*要使用ES6，必须在项目中设置babel编译器。

有用的资源： https : //developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/

3.优化图像

图像因占用大量带宽而声誉不佳。 平均网页资源的50％是图片。 看到它们逐像素加载很痛苦，这表明网站运行缓慢且未优化。

如何优化图像？

1.降低图像分辨率

如您所见，浏览器仅需要244 x 86像素的图像，但必须下载全分辨率图像，从而导致不必要的带宽消耗和缓慢的加载。 您可以为不同的屏幕尺寸投放不同的图像。 这是Google工程师写的一篇很棒的文章，介绍了如何实现这一目标！

2.压缩图像

老实说，很难找到一款出色的压缩工具。 我已经在互联网上爬了很长时间了。 无论如何，我将在此类优化工具的终极列表上发布文章，以帮助您节省时间并获得优化的图像。

南瓜 是压缩图像的绝佳选择。 Squoosh由运行developers.google.com/web的Google Web DevRel团队维护。 如果您使用的是Mac OS X，我建议您使用iResize 。 目前，我将这两种工具都用作优化图像的主要选择。

完成所有这些操作后，请确保使您的应用程序成为一名良好的服务工作者。 服务人员仅在首次加载后才有用！ 因此，首先，您必须通过我们讨论的上述技术，使其在初始负载时更快。 Workbox是Google的出色工具，可在您的应用中实现服务工作者。 它易于配置，可以通过CLI进行访问。

一些奖励技巧列表

1.使用Webpack优化插件，例如UglifyJs ， ModuleConcatenate和Splitchunks。

2.通过删除html文件的<link>和<script>标记中存在的一些不必要的rel =“ preload”或rel =“ prefetch” ，避免过多的预加载。

3.尝试通过CDN传送图像，并注意是否看到任何积极的区别。

4.访问https://developers.google.com/web/进行任何查询，它将为您带来奇迹！

最后，我要感谢大家对本系列的出色反应。 希望我们很快能在另一篇文章中见面并交换意见，以帮助Web开发社区发展。 另外，如果您有任何要问的问题，请访问 https://twitter.com/SwanandKadam5 随时与我联系 。

谢谢！

From: https://hackernoon.com/how-i-built-the-fastest-e-commerce-store-for-a-home-decor-brand-part-4-wg8y38wp