Rollup-plugin-bundle-analyzer VS Rollup-plugin-visualizer

最新推荐文章于 2024-08-27 14:54:15 发布

杨晓风-linda

最新推荐文章于 2024-08-27 14:54:15 发布

阅读量756

点赞数 7

文章标签：前端打包

本文链接：https://blog.csdn.net/yxf15732625262/article/details/135489386

版权

分析和可视化Rollup打包后的文件的插件

Rollup-plugin-bundle-analyzer
Rollup-plugin-visualizer

Rollup-plugin-bundle-analyzer和Rollup-plugin-visualizer都是用于分析和可视化Rollup打包后的文件的插件，但它们在功能和使用方式上存在一些差异。

Rollup-plugin-bundle-analyzer是一个用于分析Rollup包中各个模块占比的插件。它可以生成一个可视化的报告，帮助开发者了解包中各个模块的大小和占比，进而优化打包结果。该插件提供了一个命令行工具，可以通过命令行使用。

Rollup-plugin-visualizer是一个可视化并分析Rollup打包后文件的插件。它提供了多种观察模式，包括直观的视图分析、sunburst图、treemap图、网络图和原数据模式等。该插件可以在Vite项目中使用，通过在配置文件中引入插件并进行配置即可使用。

总的来说，Rollup-plugin-bundle-analyzer和Rollup-plugin-visualizer都是用于分析和可视化Rollup打包后文件的插件，但Rollup-plugin-visualizer提供了更多的可视化选项和观察模式，而Rollup-plugin-bundle-analyzer则更注重分析包中各个模块的占比。具体选择哪个插件取决于开发者的需求和使用习惯。

Rollup-plugin-bundle-analyzer

安装

# npm

npm install --save-dev rollup-plugin-bundle-analyzer

#yarn

yarn add -D rollup-plugin-bundle-analyzer

引入

import bundleAnalyzer from 'rollup-plugin-bundle-analyzer'

使用 - vite.config.js

export default defineConfig({
  plugins: [
    bundleAnalyzer()
  ]
})

执行：npm run build，构建成功之后，会自动打开http://127.0.0.1:9800/看到分析结果

Rollup-plugin-visualizer

npm install rollup-plugin-visualizer -D

// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    // 将 visualizer 插件放到最后
    visualizer()
  ]
})

执行：npm run build ，构建成功之后会在根目录下生成一个 stats.html ，打开页面即可以看到分析结果。我们还可以通过左上角的 排除、包含 输入框对依赖模块进行筛选。同时鼠标移入各模块，可以看到详细的分析数据：