性能文章>使用 webpack 进行 Web 性能优化(三)>

使用 webpack 进行 Web 性能优化(三)转载

1月前
193012

即使您配置 webpack 以使应用程序尽可能小,跟踪它并知道它包含什么仍然很重要。 否则,您可以安装一个使应用程序变大两倍的依赖项——甚至不会注意到它!

本节介绍可帮助您了解**包的工具。

要监控您的应用程序大小,请在开发期间使用 webpack-dashboard 并在 CI 上使用 bundlesize。

webpack-dashboard 通过依赖大小、进度和其他细节来增强 webpack 输出。 这是它的外观:

webpack-dashboard - 使用 webpack 进行 Web 性能优化(三)- HeapDump性能社区

此仪表板有助于跟踪大型依赖项——如果您添加一个,您将立即在“模块”部分看到它!

要启用它,请安装 webpack-dashboard 包:

 
npm install webpack-dashboard --save-dev

并将插件添加到配置的插件部分:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
  plugins: [
    new DashboardPlugin(),
  ],
};

如果您使用的是基于 Express 的开发服务器,则使用 compiler.apply() :

compiler.apply(new DashboardPlugin());

随意使用仪表板来寻找可能需要改进的地方! 例如,滚动模块部分以查找哪些库太大而可以用较小的替代品替换。

bundlesize 验证 webpack 资产不超过指定的大小。 将其与 CI 集成,以便在应用程序变得太大时收到通知:

bundlesize - 使用webpack进行web性能优化(三)- HeapDump性能社区

配置:

找出最大尺寸

  1. 优化应用程序以使其尽可能小。 运行生产构建。
  2. 将 bundlesize 部分添加到 package.json 中,内容如下:
     
    // package.json
    {
      "bundlesize": [
        {
          "path": "./dist/*"
        }
      ]
    }
     
  3. 使用 npx 执行 bundlesize:
     
    npx bundlesize
    这将打印每个文件的压缩后大小:
     
    PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
    PASS  
    ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
    PASS  
    ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
    PASS  
    ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
  4. 为每个尺寸添加 10-20%,您将获得最大尺寸。 这 10-20% 的余量可以让您像往常一样开发应用程序,同时在其大小增长过多时向您发出警告。

开启 bundlesize

    1. 安装 bundlesize 包作为开发依赖:
 
npm install bundlesize --save-dev
  1. 在 package.json 的 bundlesize 部分,指定具体的最大尺寸。 对于某些文件(例如图像),您可能希望指定每个文件类型的最大大小,而不是每个文件:
     
    // package.json
    {
      "bundlesize": [
        {
          "path": "./dist/*.png",
          "maxSize": "16 kB",
        },
        {
          "path": "./dist/main.*.js",
          "maxSize": "20 kB",
        },
        {
          "path": "./dist/vendor.*.js",
          "maxSize": "35 kB",
        }
      ]
    }
     
  2. 添加一个 npm 脚本来运行检查:
     
    // package.json
    {
      "scripts": {
        "check-size": "bundlesize"
      }
    }
     
  3. 配置 CI 以在每次推送时执行 npm run check-size。 (如果你在 GitHub 上开发项目,还可以将 bundlesize 与 GitHub 集成。)

现在,如果您运行 npm run check-size 或推送代码,您将看到输出文件是否足够小:

bundlesize - npm run check-size - 使用webpack进行web性能优化 - HeapDump性能社区

或者,在失败的情况下:

bundlesize - in case of failures - 使用webpack进行web性能优化 - HeapDump性能社区

 

您可能想要更深入地研究**包以查看哪些模块占用了其中的空间。 认识 webpack-bundle-****yzer:

(屏幕录制来自 github.com/webpack-contrib/webpack-bundle-****yzer)

webpack-bundle-****yzer 扫描包并构建其中内容的可视化。 使用此可视化来查找大的或不必要的依赖项。

要使用分析器,请安装 webpack-bundle-****yzer 包:

 
npm install webpack-bundle-****yzer --save-dev

在 webpack 配置中添加一个插件:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-****yzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

然后运行生产构建。 该插件将在浏览器中打开统计页面。

默认情况下,统计页面显示已解析文件的大小(即,出现在包中的文件的大小)。 您可能想要比较 gzip 的大小,因为这更接近真实用户的体验; 使用左侧的侧边栏来切换大小。

注意:如果使用 ModuleConcatenationPlugin,它可能会合并 webpack-bundle-****yzer 输出中的部分模块,从而使报告不那么详细。 如果您使用此插件,请在分析期间禁用它。
以下是要在报告中查找的内容:

  • 大依赖。 为什么它们这么大? 是否有更小的替代品(例如,Preact 代替 React)? 您是否使用了它包含的所有代码(例如,Moment.js 包含许多经常不使用且可能被删除的语言环境)?

  • 重复的依赖项。 您是否看到同一个库在多个文件中重复出现? (例如,使用 optimization.splitChunks.chunks 选项 - 在 webpack 4 中 - 或 CommonsChunkPlugin - 在 webpack 3 中 - 将其移动到一个公共文件中。)或者**包是否有同一个库的多个版本?

  • 类似的依赖。 是否有类似的库可以完成大致相同的工作? (例如,moment 和 date-fns,或 lodash 和 lodash-es。)尝试使用单一工具。

 

总结

  • 削减不必要的字节. 压缩所有内容,剥离未使用的代码,添加依赖项时要明智

  • 按路由拆分代码. 只加载真正需要的东西,稍后再延迟加载其他东西

  • 缓存代码. 您应用程序的某些部分的更新频率低于其他部分。 将这些部分分成文件,以便仅在必要时重新下载

  • 跟踪大小. 使用 webpack-dashboard 和 webpack-bundle-****yzer 等工具来了解您的应用程序有多大。 每隔几个月重新审视您的应用程序的整体性能

Webpack 并不是唯一可以帮助您更快地开发应用程序的工具。 考虑将您的应用程序设为渐进式 Web 应用程序以获得更好的体验,并使用 Lighthouse 等自动分析工具来获得改进建议。

不要忘记阅读 webpack 文档——它们还有很多其他有用的信息。

并确保使用培训应用程序!

 

延伸阅读:

使用 webpack 进行 Web 性能优化(一)

使用 webpack 进行 Web 性能优化(二)

 

分类:
标签:
请先登录,再评论

学到了

1月前

为你推荐

webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
优化 JavaScript 执行
JavaScript 经常会触发视觉变化。有时是直接通过样式操作,有时是会产生视觉变化的计算,例如搜索数据或将其排序。时机不当或长时间运行的 JavaScript 可能是导致性能问题的常见原因。您应当设法尽可能减少其影响。JavaScript 性能分析可以说是一门艺术,因为您编写的 JavaScr
如何通过 Core Web Vitals 阈值并实现整体跳出率提高 43%
随着互联网速度与日俱增,用户希望网站能够比以往更快地响应和运行。《经济时报》每月处理超过 4500 万活跃用户。通过针对整个域、AMP 和非 AMP 页面上的 Core Web Vitals 进行优化,我们设法显着降低了跳出率并改善了阅读体验。 衡量影响 我们专注于最大内
Redis 在 vivo 推送平台的应用与优化实践
一、推送平台特点 vivo推送平台是vivo公司向开发者提供的消息推送服务,通过在云端与客户端之间建立一条稳定、可靠的长连接,为开发者提供向客户端应用实时推送消息的服务,支持百亿级的通知/消息推送,秒级触达移动用户。 推送平台的特点是并发高、消息量大、送达及时性较高。目
使用 Lighthouse 优化 Web Vitals
今天,我们将介绍 Lighthouse、PageSpeed 和 DevTools 中的新工具功能,以帮助确定您的网站如何在Web Vitals上进行改进。 作为工具的复习,Lighthouse是一个开源的自动化工具,用于提高网页的质量。您可以在Chrome DevTools调试工具套件
玩转 webpack5(上)
前言本篇长文是学习程柳峰老师开设的《玩转 webpack》专栏的实践笔记,和专栏不一样的是,我的实战源码是基于 webpack5,它的配置和源码实现上与 webpack4 有许多不同的地方,感兴趣的同学可以结合我在上面放出的源码仓库进行学习,相信会有不小的收获。看完本篇长文,你将收获:能
使用 webpack 进行 Web 性能优化(三)
即使您配置 webpack 以使应用程序尽可能小,跟踪它并知道它包含什么仍然很重要。 否则,您可以安装一个使应用程序变大两倍的依赖项——甚至不会注意到它!本节介绍可帮助您了解捆绑包的工具。跟踪包大小要监控您的应用程序大小,请在开发期间使用 webpack-dashboa
使用 webpack 进行 Web 性能优化(二)
改善应用程序加载时间的下一件事(在优化应用程序大小之后)是缓存。 使用它将应用程序的某些部分保留在客户端上,并避免每次都重新下载它们。使用包版本控制和缓存标头进行缓存的常用方法:告诉浏览器将文件缓存很长时间(例如,一年): # Server headerCache-Contro