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

vite 打包学习

news 来源：原创 2024/9/20 12:38:17

plugins.jsimport vue from "@vitejs/plugin-vue";
// 自动引入插件
import autoImport from "unplugin-auto-import/vite";
import setupExtend from "unplugin-vue-setup-extend-plus/vite";
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
// gzip 插件
import compression from "vite-plugin-compression";
// 查看 打包文件大小 插件
import { visualizer } from 'rollup-plugin-visualizer'export default function getVitePlugins(command) {
// 这个值在package.js 中 不同的打包方式修改这个值const isAnalyze = process.env.ANALYZE === 'true';return [vue(),autoImport({// Auto import functions from Vue, e.g. ref, reactive, toRef...// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ["vue", "vue-router", "pinia"],// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)resolvers: [ElementPlusResolver()],dts: false,}),command === "build"? compression({ext: ".gz",deleteOriginFile: false,}): null,Components({resolvers: [ElementPlusResolver()],}),setupExtend({}),isAnalyze ? visualizer({open: true,filename: 'visualizer.html' //分析图生成的文件名}) : null];
}

vite.config.js
import { defineConfig,loadEnv } from 'vite'
import path from "path";
import getVitePlugins from './vite/plugins.js'
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {const env = loadEnv(mode, process.cwd());return {resolve: {alias: {// 设置别名"@": path.resolve(__dirname, "./src"),},extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],},plugins: [getVitePlugins(command)],base: env.VITE_ENV === "production" ? "./" : "/", // 公共基础路径 相当于 webpack的output.publicPathbuild: {outDir: 'dist/static',  // 打包输出目录rollupOptions: {output: {entryFileNames: "js/[name]-[hash].js",  // 入口文件名chunkFileNames: "js/[name]-[hash].js", // 代码分割文件名assetFileNames(assetInfo) { // 根据后缀名匹配 资源文件名if (assetInfo.name.endsWith(".css")) {return "css/[name]-[hash].css";}const imgExts = [".png", ".jpg", ".jpeg", ".gif", ".svg", '.webp', '.ico'];if (imgExts.some(ext => assetInfo.name.endsWith(ext))) {return "img/[name]-[hash].[ext]";}return "assets/[name]-[hash].[ext]";},// 将不同的模块放在不同的chunk中manualChunks: (id) => {if (id.includes('node_modules')) {// if (id.includes('vue')) return 'vendor-vue';if (id.includes('lodash')) return 'vendor-lodash';if (id.includes('element-plus')) return 'vendor-element';if (id.includes('axios')) return 'vendor-axios';if (id.includes('leafer-ui')) return 'vendor-leafer';return 'vendor-other';}// 根据你的具体需求调整这里的逻辑return 'main';},}}}}})

main.jsimport { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'let app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}app.use(router)
app.mount('#app')

package.jscross-env 是用来 判断环境变量的 "build:test": "cross-env ANALYZE=true vite build" 
修改了ANALYZE 的值  
这样的话 npm run build 就是正常的打包
npm run build:test 打包完 就会生成打包分析的网页 并打开
{"name": "vite-project","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview","build:test": "cross-env ANALYZE=true vite build"},"dependencies": {"@element-plus/icons-vue": "2.3.1","axios": "^1.7.5","cross-env": "^7.0.3","element-plus": "^2.8.1","leafer-ui": "^1.0.2","less": "^4.2.0","lodash": "^4.17.21","pinia": "^2.2.2","sass": "^1.77.8","vue": "^3.4.37","vue-router": "^4.4.3"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.2","rollup-plugin-visualizer": "^5.12.0","unplugin-auto-import": "0.17.1","unplugin-vue-components": "^0.27.4","unplugin-vue-setup-extend-plus": "1.0.0","vite": "^5.4.1","vite-plugin-compression": "0.5.1"}
}