跳到主要内容

rollup-plugin-visualizer

2023年12月24日
柏拉文
越努力，越幸运

一、认识​

为了能可视化地感知到产物的体积情况，推荐大家用 rollup-plugin-visualizer 来进行产物分析。

二、配置​

// 注: 首先需要安装 rollup-plugin-visualizer 依赖
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { visualizer } from "rollup-plugin-visualizer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    visualizer({
      // 打包完成后自动打开浏览器，显示产物体积报告
      open: true,
    }),
  ],
});

效果​

当你执行 pnpm run build 之后，浏览器会自动打开产物分析页面:

Preview

从中你可以很方便地观察到产物体积的分布情况，提高排查问题的效率，比如定位到体积某些过大的包，然后针对性地进行优化。