webpack之输出结果分析

最新推荐文章于 2024-06-30 06:00:00 发布
最新推荐文章于 2024-06-30 06:00:00 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/106410593
版权

两步走。

  1. 项目根目录下webpack --profile --json > stats.json，生成stats.json文件
    --profile，记录构建的耗时信息；
    --json，输出结果以JSON格式保存；
    > stats.json，输出结果保存在stats.json文件中。
    一个前提：全局安装了webpack， npm install -g webpack
    一个必须：json文件名必须是stats.json
  2. 将 stats.json导入 可视化工具 并分析
    两种可视化工具供选择。
    第一种，到达官方分析工具，导入stats.json即可；
    第二种，全局安装webpack-bundle-analyzer，然后执行webpack-bundle-analyzer stats.json即可
richest_qi
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack的基础使用和简单优化
Little_Pig_Bug的博客
09-03 491
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。 当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。 为什么要使用webpack 1. 与react一类模块化开发的框架搭配着用比较好。 2. 属于配置型的构建工具，比较用容易上手。 3. webpack使用内存来对构建内容进行缓存，构建过程中会比较快 webpack的核心概念 1. ..
利用 stats.json 定位 @nrwl/react webpack 配置问题
Hitxzi的博客
12-06 656
背景 团队使用NX这一 monorepo 工具来搭建 React 应用。NX 基于 React 应用在 webpack 打包时添加了url-loader的相关配置。但是同事反馈该url-loader针对部分引用的图片文件不起作用。 定位 url-loader 作用 url-loader，简而言之，可以将应用中引用到的一些资源文件（例如图片）转换成 base64 的数据格式，然后嵌入到我们的应用中（例如 HTML 的 img src, css 中的 url 函数），这样便无需针对该资源发起网络请求，节省请求资
webpack 最好的日志_webpack build可视化统计分析
weixin_39710966的博客
12-20 207
建立可视化分析统计可以帮助我们更好的理解webpack。我们可以很容易地从构建结果那里得到的统计数据，我们可以使用一个工具来可视化这些数据，可以分析我们程序包的组成。配置webpack为了得到合适的输出我们需要对配置文件做两个调整，我们需要加上这两个标志： – profile 捕捉性能时间的相关信息。 – json 使webpack中输出我们希望这些统计数据。下面是在package中要加的代码：{...
webpack优化篇（三十九）：初级分析：使用 webpack 内置的 stats
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
08-17 902
运行下面命令，可以看到打包的信息时间，但无法分析出那个 loader 时间长。stats: 构建的统计信息，每个资源大小，总共消耗的时间。在 package.json 文件中添加。文件，里面有模块相关的信息。玩转webpack学习笔记。颗粒度太粗，看不出问题所在。...
Webpack: 7 款常用的性能分析工具
最新发布
Wang的专栏
06-30 1100
Webpack 最大的优势在于它的功能非常强大、全面，加之繁荣活跃的组件生态，已经足够应对几乎所有 Web 构建需求，包括：SPA、MPA、SSR、桌面应用、Node 程序、WebAssemsbly、PWA、微前端等等，所以即使在近几年工程化领域异军突起、百花齐放的背景下，Webpack 也依然能保持老大哥的位置。但软件世界没有银弹！Webpack 在大型项目中通常性能表现不佳，这一方面是因为 JavaScript 语言的单线程架构决定了 Webpack 的运算效率就不可能很高；
【Web技术】1176- 前端模块依赖关系分析与应用
pingan8787
12-19 807
Meta摘要这篇分享主要的内容是是如何使用webpack的stats对象进行依赖和编译速度的解析，该对象包含大量的编译时信息，我们可以用它生成包含有关于模块的统计数据的 JSON 文件。这...
webpack-stats-plugin:Webpack统计插件，用于生成信息，文件清单等
04-01
Webpack统计插件 该插件将提取webpack 对象，对其进行处理/转换，并将其写出到文件中以供进一步使用。 最常见的用例是构建散列的捆绑包，并希望以编程方式引用Node.js服务器中的正确捆绑包路径。 安装 该插件可通过： $ npm install --save-dev webpack-stats-plugin $ yarn add --dev webpack-stats-plugin 例子 我们为所有版本的webpack提供了示例webpack配置。 参见例如 。 命令行界面 如果您使用的是webpack-cli ，则可以启用： $ webpack-cli --plugin webpack-stats-plugin/lib/stats-writer-plugin 基本的 基于webpack.config.js的基本集成： const { StatsWriterPlugi
详解webpack 最简打包结果分析
10-17
5. 分析打包后的文件结构和代码，理解 webpack 的模块加载和打包机制。 了解这些基础知识后，开发者可以进一步探索 webpack 的高级特性，如 loader（用于转换不同类型的资源），plugin（扩展 webpack 功能），以及...
Webpack基础教程之名词解释
10-15
Webpack提供了一套完善的系统，通过入口管理应用的起点，输出设定打包结果，Loader处理多种类型的资源，而插件则增强了Webpack的灵活性和功能性。理解和熟练掌握这些核心概念，是充分利用Webpack构建高效、模块化的...
Vue+ElementUI项目使用webpack输出MPA的方法
01-21
需求分析 为另一个项目提供可嵌入的功能单页，大部分页面使用时都是独立功能页，个别页面带有左侧边栏（相当于3-4个页面的整合形态），由于资源定位地址的限定，每个页面打包为单页后，入口html文件需要定制命名，...
vue-cli的webpack模板项目配置文件分析
08-30
本文主要分析了基于 Vue CLI 创建的项目中，关于 Webpack 配置文件的结构和功能。 1. **文件结构** 项目的构建与开发涉及的主要文件位于 `build` 和 `config` 目录。`build` 目录包含了构建和开发所需的脚本，如 `...
extract-stats-webpack-plugin:提取一个 `stats.json` 文件用于离线处理
06-08
提取统计-webpack-plugin 提取stats.json文件以供离线处理。 { ... plugins : [ new ExtractStatsPlugin ( 'stats.json' , { hash : true , assets : false , reasons : false , chunks : true , source : false } ) ] }
jsonstats:json 中的系统统计信息（这里是流行语）
06-24
jsonstats 用于查询任意系统“事实”的 RESTful 后端服务。 特征 最低要求 Python 2.4+ 兼容 访问和应用程序日志 主机和环境 REST 端点 单元测试 插件 以下插件与 jsonstats 一起提供： Deb - 列出已安装的 debian/ubuntu 软件包 Facter - 列出来自 facter 命令的系统信息 Pip - 列出已安装的 pip 包 RPM - 列出已安装的 rpm 包 时间戳 - 请求数据时的时间戳 要求 Python 2.4+ 如果 Python 2.4 或 2.5 如果使用 快速入门指南 安装它 通过distutils ： sudo python ./setup.py install 通过rpm （需要开发包）： make rpm sudo yum localinstall ./rpm-build/noarch/*.
stats-webpack-plugin:将构建的统计信息写入文件
05-11
Webpack的统计插件 将构建的统计信息写入文件。 安装 $ npm install --save-dev stats-webpack-plugin 用法 var StatsPlugin = require ( 'stats-webpack-plugin' ) ; module . exports = { plugins : [ new StatsPlugin ( 'stats.json' , { chunkModules : true , exclude : [ / node_modules [ \\ \/ ] react / ] } ) ] } ; 为--profile标志或设置profile: true在webpack.config为profile: true ，以获取详细的计时度量。 有关更多详细信息，请参见。 原料药 new
webpack-stats-progress:一个webpack插件，可以使构建过程进展顺利，并提供更好的输出文件统计信息
05-17
该插件旨在提供更清洁的webpack构建输出。 运行构建时，它还会显示进度条。 进度条 该插件还带有进度条 用法 在webpack配置文件中，添加此插件并确保关闭统计信息 const WebpackStatsProgress = require ( "webpack-stats-progress" ) ; const path = require ( "path" ) ; module . exports = { // ... other webpack configuration mode : "production" , stats : "none" , plugins : [ new WebpackStatsProgress ( { buildFolder : path . join ( __dirname , "dist" ) } ) , ] , }
webpack.rar
06-13
3. **编译（Compiling）**：基于依赖图，Webpack 开始编译输出结果。它会根据配置的插件（Plugin）进行一系列的处理，比如代码分割、tree-shaking（去除未使用的代码）、热模块替换（HMR）等，以优化最终生成的静态...
webpack优化经验１(持续)
weixin_30908649的博客
01-05 171
１ 不知道该优化哪里 先开启gzip压缩，这样可以很直接的减少请求包的体积，效果显著，不过需要在服务器端作相应的配置才能生效 ２拆分vendor包, 减少单体包的体积，并行加载 通过配置，将不同的公用库拆分为多个公共包，并行加载，提高页面响应速度，这种方法不如第一种效果显著 ３使用webpack-bundle-analyzer对现有bundle作分析 看看有哪些包可以拆出来做...
css测量工具_五种工具可视化分析 webpack 打包性能瓶颈
weixin_39688750的博客
11-29 597
前言当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。关于优化，有几个基本规则：首先知道要优化什么；针对待优化点进行优化；衡量优化前后对项目的影响；如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，但 webpack 打包后的文件非常大且可读性差，下面就介绍几种可视化的分析工具，帮助你快速定位问题所在。一、测量构建...
记一次Webpack打包优化及踩的坑
我不是大牛，我只是个搬运工！
05-07 4789
首先，关于 webpack 打包优化网上已经有很多文章，这里主要是做个记录。 我们的项目使用的框架: react + antd 。在打包时遇到的主要问题是： 1. 构建太慢，主要体现在生产模式下，三个项目同时构建，居然要6分钟之久； 2. 生产模式下打包出来的文件过大。（可能是文件存在重复打包的现象）； 3. 开发模式下太耗内存，经常出现内存被占满的情况。 开发模式下主要...
webpack性能分析插件
08-21
2. speed-measure-webpack-plugin：该插件可以测量整个构建过程中每个加载器和插件所花费的时间，并将结果以表格的形式输出。这样可以帮助你找出哪些步骤是最耗时的，以便进行优化。 3. webpack-parallel-uglify-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值