webpack优化篇(三十九):初级分析:使用 webpack 内置的 stats

简介: webpack优化篇(三十九):初级分析:使用 webpack 内置的 stats

说明

玩转webpack学习笔记



stats

stats: 构建的统计信息,每个资源大小,总共消耗的时间


package.json 中使用 stats

"scripts": {
  "build:stats": "webpack -- env production - -json > stats. json",
  ...
},



Node.js 中使用

const webpack = require("webpack" );
const config = require("./webpack.config.js")("production");
webpack(config, (err, stats) => {
  if (err) {
    return console.error(err);
  }
  if (stats.hasErrors()) {
    return console.error(stats.toString("errors-only"));
  }
  console.log(stats);
});


颗粒度太粗,看不出问题所在

5e477631cdd347028a1aa9135d01d3e2.png


stats 使用

在 package.json 文件中添加

"build:stats": "webpack --config webpack.prod.js --json > stats.json"


b685590aa5e14ab995049e0df30ba8d8.png


然后运行

npm run build:stats


4358f1f994944a7c9a305467c6f23206.png


就会生成一个 stats.json 文件,里面有模块相关的信息


175646f1de95430b8e796c9032f99243.png


另外我们可以注释掉 stats: 'errors-only'

ab51f842b7ac4791b0b57b80ab767c4b.png


运行下面命令,可以看到打包的信息时间,但无法分析出那个 loader 时间长。

npm run build


558a8c46e9044f5f90427fe5d2d4edf8.png

目录
相关文章
|
2月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
64 2
|
1月前
|
缓存 JavaScript 前端开发
探讨如何通过一系列优化策略来提升TypeScript与Webpack的构建性能。
【6月更文挑战第11天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。通过这些方法,可以提升构建速度,提高开发效率。
59 0
|
2月前
|
JSON 前端开发 JavaScript
webpack学习笔记--优化
webpack学习笔记--优化
|
8天前
|
缓存 JSON 前端开发
Webpack打包优化实践
【7月更文挑战第17天】Webpack的打包优化是一个持续的过程,需要开发者根据项目的实际情况选择合适的优化策略。通过拆分代码、压缩代码、使用Tree Shaking、优化加载器配置、利用缓存以及进行性能分析,我们可以有效提升Webpack的打包效率和应用的加载
|
2月前
|
缓存 JavaScript 前端开发
【TypeScript技术专栏】TypeScript与Webpack构建优化
【4月更文挑战第30天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(关闭不必要的类型检查,适配目标环境)和webpack.config.js(配置entry、output、resolve,使用压缩插件)。启用Webpack缓存和增量构建,利用代码拆分与懒加载,能有效提升构建速度和开发效率。
|
2月前
|
缓存 前端开发 算法
Webpack 进阶:深入理解其工作原理与优化策略
Webpack 进阶:深入理解其工作原理与优化策略
94 2
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
54 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
2月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
2月前
|
缓存 监控 前端开发
说说如何借助webpack来优化前端性能?
说说如何借助webpack来优化前端性能
123 1
|
2月前
|
缓存 前端开发 JavaScript