vite: vite-bundle-analyzer 体积大小分析

利用 vite-bundle-analyzer 插件分析项目包体积,从而优化加载

01 安装插件

网上流行的有另一个,我目前用这一个,作用差不多。

yarn add --dev vite-bundle-analyzer

02 配置 vite.config.ts

使用简单,直接添加到 plugins 中,注意只在 mode === developement 使用即可

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { analyzer } from 'vite-bundle-analyzer';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  console.log('command:', command);
  console.log('mode:', mode);
  return {
    plugins: [
    	react(),
    	analyzer()
    ],
    resolve: {
      alias: {
        "@": "/src",
      },
    },
    server: {
      host: "0.0.0.0"
    },
  };
});

03 运行效果截图

默认运行在 localhost:8888 端口

vite analyzer size