vite上的webpack-bundle-anaylzer

rollup-plugin-bundle-analyzer

直接放图，简直跟webpack-bundler-analyzer没有差别

背景

最近在做项目的体积优化，之前使用webpack，体验最好的就是webpack-bundle-analyzer了，不仅能输出输入的代码体积，就连打包后的模块详细体积都能显示出来。最近vite风头正盛，想要分析通过vite构建的项目，找了一圈，也没有合适的工具，直到遇到了rollup-plugin-bundle-analyzer

配置方式

插件的配置跟webpack-bundle-anzlyzer也很像，几乎没有学习成本

使用方法

安装

# NPM
npm install --save-dev rollup-plugin-bundle-analyzer
# Yarn
yarn add -D rollup-plugin-bundle-analyzer

引入

import bundleAnalyzer from "rollup-plugin-bundle-analyzer";

plugins: [
    bundleAnalyzer(),
    vue(),
]

这样就完成了，开心的做体积优化去了。