1. Install the rollup-plugin-visualizer plugin
npm install rollup-plugin-visualizer --save-dev
Two, vite.config.ts configuration
/*
* @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,
},
},
},
],
},
}),
],
};
});
3. Execute npm run build, the package is successfully opened and the browser analysis is automatically opened, as shown in the figure below