webpack依赖分析|打包优化

===========

https://www.timsrc.com/article/30/build-analysis

 

您还可以考虑使用以下标记：

• --profile 捕获与时间相关的信息。该设置是可选的，但值得一试。
• --progress 显示 Webpack 在构建的不同阶段花了多长时间。

要理解 Webpack 在构建过程中为什么会包含特定模块，请使用 whybundled 或 webpack-why，--display-reasons 标记也提供了许多相关信息。例如：npm run build -- --display-reasons。

 

Node API

我们还可以通过 Node 获取统计信息。由于统计信息可能包含错误，因此我们需要对其进行分情况处理：

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);
});

 =============

https://juejin.cn/post/6844903825216651271

1、配置webpack.config.js文件：

// webpack.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
      generateStatsFile: true, // 是否生成stats.json文件
    }),
  ]
}

2、配置package.json 文件

{
 "scripts": {
    "generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
    "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 启动展示打包报告的http服务器
  }
}

3、在命令行工具中，先运行npm run generateAnalyzFile命令，然后运行npm run analyz命令。 此时就可以看到分析结果了。

优点： 稍微复杂，但是灵活啊!
缺点： 每次运行命令时，都会在dist目录下生成一个stats.json文件。这个问题，可以将generateStatsFile属性设置为false，但是这样就无法生成stats.json文件了。解决办法：需要查看分析报告的时候设置为true，其余时候设置为false。

======================