提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

webpack优化篇（三十九）：初级分析：使用 webpack 内置的 stats

2023-03-14 22:59:14 时间

说明

玩转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

相关文章