1. 首页
  2. webpack

五种可视化方案分析 webpack 打包性能瓶颈

前言

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置,但当项目业务功能达到一定规模时,默认的配置已经不足以满足开发、用户的期望,我们就需要对 webpack 配置进行优化。

关于优化,有几个基本规则:

  • 首先知道要优化什么;
  • 针对待优化点进行优化;
  • 衡量优化前后对项目的影响;

如何知道具体该如何优化喃,最直观的方式是分析它的输出文件,但 webpack 打包后的文件非常大且可读性差,下面就介绍几种可视化的分析工具,帮助你快速定位问题所在。

一、测量构建时间

优化 webpack 构建速度的第一步是知道将精力集中在哪里。我们可以通过 speed-measure-webpack-plugin 测量你的 webpack 构建期间各个阶段花费的时间:

步骤一:安装 speed-measure-webpack-plugin


npm install speed-measure-webpack-plugin --save-dev

步骤二:配置

// 分析打包时间
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
// ...
module.exports = smp.wrap(prodWebpackConfig);

五种可视化方案分析 webpack 打包性能瓶颈

它能够:

  • 分析整个打包总耗时;
  • 每个插件和 loader 的耗时情况;

方便开发人员定位打包耗时瓶颈。

二、分析包内容

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

步骤一:安装 webpack-bundle-analyzer


npm install webpack-bundle-analyzer --save-dev

步骤二:配置

// 分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    // 开启 BundleAnalyzerPlugin
    new BundleAnalyzerPlugin(),
  ],
};

一般运行在生产版本中,该插件将在浏览器中打开统计信息结果页面。

五种可视化方案分析 webpack 打包性能瓶颈

注意:webpack4 在 production 环境下默认启动了 ModuleConcatenationPlugin (预编译所有模块到一个闭包中,提升代码在浏览器中的执行速度),它可能会合并 webpack-bundle-analyzer 输出中的模块的一部分,从而使报告不太详细。 如果你使用此插件,请在分析过程中将其禁用。设置如下:

module.exports = {
  // ...
  optimization: {
    //
    concatenateModules: false,
  },
};

具体来说,使用 webpack-bundle-analyzer 能可视化的反映:

  • 打包出的文件中都包含了什么;
  • 每个文件的尺寸在总体中的占比,哪些文件尺寸大,思考一下,为什么那么大,是否有替换方案,是否使用了它包含的所有代码;
  • 模块之间的包含关系;
  • 是否有重复的依赖项,是否存在一个库在多个文件中重复? 或者捆绑包中是否具有同一库的多个版本?
  • 是否有相似的依赖库, 尝试使用一种依赖库实现相似的功能。
  • 每个文件的压缩后的大小。

三、在线分析工具

如果你对在本地安装插件进行测量分析包方式感觉不爽的话,这里将会推荐几款在线测量工具,但都需要 webpack 统计文件。

1. 生成统计文件 stats.json

使用 webpack 编译源代码时,用户可以生成一个包含有关模块统计信息的 JSON 文件。 这些统计信息可用于分析应用程序的依赖关系图以及优化编译速度。 该文件通常是按以下方式生成的:

在 webpack 启动时带入参数:--profile --json > stats.json ,例如:


webpack --config webpack.config.prod.js --profile --json > stats.json
  • --profile:记录下构建过程中的耗时信息
  • --json:以 JSON 的格式输出构建结果,最后只输出一个  .json  文件,这个文件(stats.json)中包括所有构建相关的信息
  • > stats.json :是 UNIX/Linux 系统中的管道命令、含义是把  webpack --profile --json  输出的内容通过管道输出到  stats.json  文件中

执行命令后,会在项目中多出一个 stats.json 文件,接下来将 stats.json 文件上传到以下在线工具上,以可视化分析包的组成。

常用的在线工具有:

  • 官方可视化分析工具 Webapck Analyse:生成一个图表,让你可视化了解项目的依赖关系、模块大小及耗时等;
  • Webpack Visualizer:生成一个饼状图,可视化 bundle 内容;
  • webpack bundle optimize helper:此工具会分析你的 bundle,并为你提供可操作的改进措施建议,以减少 bundle 体积大小。

2. 官方可视化分析工具 Webapck Analyse

Webapck Analyse 是一个在线 Web 应用,它为你提供了对包的更全面的分析,并且它绘制了项目中所有依赖模块的图形,这对于依赖关系较少的项目非常有用。

打开 Webapck Analyse ,上传 stats.json

五种可视化方案分析 webpack 打包性能瓶颈

Webpack Analyse 不会把你选择的  stats.json  文件发达到服务器,而是在浏览器本地解析,你不用担心自己的代码为此而泄露。 选择文件后,你马上就能如下的效果图:

五种可视化方案分析 webpack 打包性能瓶颈

Modules :展示所有的模块,每个模块对应一个文件。并且还包含所有模块之间的依赖关系图、模块路径、模块 ID、模块所属 Chunk、模块大小;

五种可视化方案分析 webpack 打包性能瓶颈

Chunks :展示所有的代码块,一个代码块中包含多个模块。并且还包含代码块的 ID、名称、大小、每个代码块包含的模块数量,以及代码块之间的依赖关系图;

Assets :展示所有输出的文件资源,包括 .js.css、图片等。并且还包括文件名称、大小、该文件来自哪个代码块;

五种可视化方案分析 webpack 打包性能瓶颈

Warnings :展示构建过程中出现的所有警告信息;

五种可视化方案分析 webpack 打包性能瓶颈

Errors :展示构建过程中出现的所有错误信息;

五种可视化方案分析 webpack 打包性能瓶颈

Hints :展示处理每个模块的过程中的耗时。

五种可视化方案分析 webpack 打包性能瓶颈

3. Webpack Visualizer 分析工具

可视化并分析您的 Webpack 捆绑包,以查看哪些模块正在占用空间,哪些可能是重复的。

它既可作为插件使用,也可以在线使用,是一种较新的工具。

方式一:作为插件使用


npm install webpack-visualizer-plugin --dev-save

配置:

// 分析包内容
const Visualizer = require('webpack-visualizer-plugin');
module.exports = {
  plugins: [
    // 开启 Visualizer
    // 默认输出为 stats.html,这里为 statistics.html
    new Visualizer({
      filename: './statistics.html',
    }),
  ],
};

然后在浏览器中直接打开 statistics.html 就可以看到分析结果了:

五种可视化方案分析 webpack 打包性能瓶颈

方式二:在线使用

打开 chrisbateman.github.io/webpack-vis… ,上传 stats.json 既可看到分析结果。

4. webpack bundle optimize helper 分析工具

打开 webpack.jakoblind.no/optimize/ ,上传 stats.json 既可看到分析结果及优化建议:

五种可视化方案分析 webpack 打包性能瓶颈

四、总结

我们总共介绍了以下 5 种测量工具,每种工具都提供了对包分析的不同视角,例如:

  • 在开发过程中,当向项目引入新包时,我个人经常使用 Webpack Visualizer ,饼状图给出了关于大小的比例的即时反馈;
  • 在分析每次构建版本的耗时情况时,相对于其它 4 中,speed-measure-webpack-plugin 能够获取每个插件和 loader 的耗时情况,帮助你将注意力集中在需要优化的插件上;
  • webpack-bundle-analyzer 能够将 bundle 内容展示为便捷的、交互式、可缩放的树状图形式;
  • Webapck Analyse 相对于其它 4 种,能够对包进行全方位的分析;
  • 相对于其它 4 种,webpack bundle optimize helper 能提供可操作的改进措施建议;

五、往期 webpack 系列

webpack 最佳配置指北

窥探原理:手写一个 JavaScript 打包器

如果觉得不错,就点个赞吧!👍👍👍

想看往期更过系列文章,点击前往 github 博客主页

作者:前端瓶子君
链接:https://juejin.im/post/5e39570bf265da573c0c6679

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:五种可视化方案分析 webpack 打包性能瓶颈

链接:https://www.javascriptc.com/3927.html

« 你所应该知道或不知道的HTTP——基础篇
有赞全链路追踪实践»
Flutter 中文教程资源

相关推荐

QR code