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

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

5月前
228734

即使您配置 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 性能优化(二)

 

点赞收藏
分类:标签:
风之石
请先登录,查看3条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

【全网首发】抛砖系列之前端性能分析工具

【全网首发】抛砖系列之前端性能分析工具

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(1)——SDK

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(2)——存储和分析

从零开始搞监控系统(3)——性能监控

从零开始搞监控系统(3)——性能监控

Sentry 错误监控实战

Sentry 错误监控实战

前端构建效率优化之路

前端构建效率优化之路

4
3