vue3+vite利用插件rollup-plugin-visualizer分析打包体积

一、安装rollup-plugin-visualizer插件

npm install rollup-plugin-visualizer --save-dev

二、vite.config.ts配置

/*
 * @Author: e-YingChen1
 * @Date: 2022-09-20 10:47:25
 * @LastEditTime: 2023-04-03 14:50:00
 */
import path from "path";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import ElementPlus from "unplugin-element-plus/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import requireTransform from "vite-plugin-require-transform";
import viteCompression from "vite-plugin-compression";

import { visualizer } from "rollup-plugin-visualizer"; //查看打包后文件分析
import { VitePWA } from "vite-plugin-pwa"; //离线缓存

const pathSrc = path.resolve(__dirname, "src");
const target = "https://594q56y884.zicp.fun";
// const target = 'http://localhost:3300'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, __dirname);
    return {
        resolve: {
            alias: {
                "~/": `${pathSrc}/`,
            },
        },
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: `@use "~/styles/element/index.scss" as *; `,
                },
            },
        },
        // 打包配置
        build: {
            // target: "modules",//默认modules，另一个特殊值是 “esnext”—— 即假设有原生动态导入支持，并且将会转译得尽可能小
            outDir: "dist", //指定输出路径
            // assetsDir: "assets", // 指定生成静态资源的存放路径 默认assets
            minify: "terser", // 混淆器，terser构建后文件体积更小，
            /*构建后是否生成 source map 文件*/
            // sourcemap:true,// 默认值：false
            chunkSizeWarningLimit: 2000,
            cssCodeSplit: true,
            sourcemap: false,
            assetsInlineLimit: 4000,
        },
        server: {
            host: "0.0.0.0",
            port: Number(env.VITE_APP_PORT),
            open: true,
            // proxy: {
            //   "/api": {
            //     target: target,
            //     changeOrigin: true,
            //     rewrite: (path) => path.replace(/^\/api/, ""),
            //   },
            // },
        },
        plugins: [
            vue(),
            // 额外配置了手动引入修改主题色，在代码中不引入ElMessage直接使用的话tslint会报错，引入的话主题色又会被覆盖，只能再配置手动引入的
            ElementPlus({
                useSource: true,
            }),
            AutoImport({
                //自动引入vue,后续页面需要用到vue相关方法可以不用自己单独`import 'ref/computed.....' from 'vue' `
                imports: ["vue", "vuex", "vue-router"],
                resolvers: [ElementPlusResolver()],
                dts: "src/auto-import.d.ts",
            }),
            Components({
                // allow auto load markdown components under `./src/components/`
                extensions: ["vue", "md"],
                // allow auto import and register components used in markdown
                include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
                resolvers: [
                    ElementPlusResolver({
                        importStyle: "sass",
                    }),
                ],
                dts: "src/components.d.ts",
            }),
            //Gzip  nginx需要同步设置开启Gzip
            viteCompression({
                verbose: true, //默认即可
                disable: false, //开启压缩（不禁用），默认即可
                deleteOriginFile: false, //删除源文件
                threshold: 10240, //压缩前最小文件大小(10k)
                algorithm: "gzip", //压缩算法
                ext: ".gz", //文件类型
            }),
            requireTransform({
                fileRegex: /.ts$|.tsx$|.vue$/,
            }),

            //打包体积分析
            visualizer({ 
                open: true ,//注意这里要设置为true，否则无效
            }),
            VitePWA({
                workbox: {
                    cacheId: "amelia",
                    runtimeCaching: [
                        {
                            urlPattern: /.*\.js.*/,
                            handler: "StaleWhileRevalidate",
                            options: {
                                cacheName: "xiaoman-js", //缓存js名称
                                expiration: {
                                    maxEntries: 30,
                                    maxAgeSeconds: 30 * 24 * 60 * 60,
                                },
                            },
                        },
                    ],
                },
            }),
        ],
    };
});

三、执行npm run build,打包成功自动打开浏览器分析，图如下