乐趣区

关于javascript:介绍几个不太常用的打包分析工具

jiezi

webpack官网提供了剖析打包的一些工具，咱们在开发打包后，咱们能够利用 webpack 给咱们提供的一些工具去剖析包的大小，从而对打包输入文件进行优化，通常咱们都会用 webpack-bundle-analyzer 这个插件去剖析，除了这种，咱们看下官网提供的另外几种工具。

注释开始 …

在开始本文之前，首先会从以下几点去利用工具剖析打包dist，参考官网文档 bundle-analysis

  • webpack-chart: webpack stats 交互饼图，次要是利用命令行 webpack --profile --json=stats.json 本地生成json, 而后依据生成的json 显示包的信息
  • webpack-bundle-analyzer是一个插件，只有打包胜利后，会主动关上一个界面剖析 dist 包
  • webpack bundle optimize helper 剖析打包后的 bundle.js，缩小bundle 大小
  • bundle-stats生成一个 bundle 报告，比拟不同构建之间的后果

webpack-chart

咱们关上 webpack-chart

而后在咱们的我的项目命令行里输出

npx webpack --profile --json=stats.json

或者在package.json


  "scripts": {
    "test": "echo \"Error: no test specified\"&& exit 1",
    "server": "webpack server",
    "async": "webpack --profile --json=stats.json"
  },

将生成的 stats.json 在指定关上的那个网站上上传上去

然而这个图貌似并没有那么显著

webpack-visualizer

关上 webpack-visualizer

将生成的 stats.json 上传后

能剖析哪个文件蕴含的一些依赖包的关系

webpack-bundle-analyzer

间接装置 webpack-bundle-analyzer 插件

npm i webpack-bundle-analyzer --save-dev
// webpack.config.js
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')
...
module.exports = {
    plugins: [
    ...
    new BundleAnalyzerPlugin()]
}

当咱们运行 npx webpack 时，就会主动关上本地 8888 端口了

通常来说，这种形式成果最好，能够十分分明的看到文件包之间的依赖关系

另外还有一种形式，就是能够用命令行形式, 前提是学生成stats.json

npx webpack-bundle-analyzer stats.json

webpack bundle optimize helper

关上地址 helper, 上传生成的stats.json

在这之前咱们 webpack.config.js 的mode:development此时咱们改成mode:production

相比拟之前要小得多, 并且通知咱们一些能够改良的意见

analyse

间接关上 analyse, 把生成的 stats.json 上传上去即可

不过这个信息貌似只能剖析包文件的一些大小，包之间的依赖关系并没有那么显著

总结

  • 次要是介绍 webpack 几种不同剖析包的工具，每一种都有不同的特点
  • webpack --profile --json=stats.json生成 stats.json 文件，而后利用工具上传stats.json，剖析包数据
  • 最实用的还是 webpack-bundle-analyzer 用得比拟多点

欢送关注公众号：Web 技术学苑
好好学习，天天向上！

退出移动版