【rollup-plugin-visualizer】vite项目打包大小可视化

最新推荐文章于 2025-03-29 09:42:18 发布

偏向明知山

最新推荐文章于 2025-03-29 09:42:18 发布

阅读量501

点赞数 5

分类专栏：大前端的世界前端工具箱文章标签：前端持续部署 vue.js

本文链接：https://blog.csdn.net/wzyleix97/article/details/143182712

版权

前端工具箱同时被 2 个专栏收录

9 篇文章

订阅专栏

大前端的世界

7 篇文章

订阅专栏

引言

在vite项目中，如何可视化的查看项目的包体积呢，打包后，针对包进行针对性优化，保证项目的合适大小

打包大小可视化

rollup-plugin-visualizer

插件安装

npm install rollup-plugin-visualizer

查看package.json

在这里插入图片描述

插件引入main.js

在defineConfig中的plugin插入visualizer配置
打包后，将会在dist目录中生成stats.html文件

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';
import { visualizer } from 'rollup-plugin-visualizer';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      filename: './dist/stats.html',
      title: 'Bundle Visualizer',
    }),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss({
          content: ['./src/**/*.vue'],
        }),
      ],
    },
  },
});