当前位置：首页 > news >正文

vue3减少打包体积

news 2025/6/7 12:36:47

问题：打包之后体积达到5M导致第一次运行加载速度特别慢

先安装rollup-plugin-visualizer分析打包之后哪个文件太大，可以看到占据总体积的百分比。
然后不要再main.ts全局加载element组件，最好按需加载。
打包的时候去掉debugger和console。
这样打包下来剩2M左右。运行速度明显加快很多

vite.config.ts文件配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { visualizer } from "rollup-plugin-visualizer";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";export default defineConfig({plugins: [vue(),visualizer({emitFile: false,filename: "analysis-chart.html", // 分析报告文件名open: true,sourcemap: true,gzipSize: true,brotliSize: true,}),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),Icons({compiler: "vue3", // 指定 Vue 3autoInstall: true, // 自动安装图标组件}),],resolve: {alias: {/** @ 符号指向 src 目录 */"@": resolve(__dirname, "./src"),},},server: {proxy: {"/BASE_URL": {target: "你自己的真实路径",changeOrigin: true,secure: false,rewrite: (path) => path.replace(/^\/BASE_URL/, ""),},},host: "0.0.0.0", // 监听所有网络接port: 9001,open: false,},build: {minify: "terser",terserOptions: {compress: {drop_console: true, // 移除 consoledrop_debugger: true, // 移除 debugger},},sourcemap: false,rollupOptions: {output: {chunkFileNames: "js/[name]-[hash].js", // 引入文件名的名称entryFileNames: "js/[name]-[hash].js", // 包的入口文件名称assetFileNames: "[ext]/[name]-[hash].[ext]", // 资源文件像 字体，图片等},},},
});