diff --git a/README.md b/README.md index bb151bf..101b955 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,285 @@ -# samples-plus-ts +# vue3+vite 如何打包优化 +## 前言 +首先 npm run bulid 看一下打包之后的目录结构情况 -## Project Setup +![image](src/assets/readme/1.png) -```sh -npm install +我们可以看出,第三方依赖包文件在没有处理的情况下是非常大的,而且随着版本的迭代、业务的增多,第三方依赖也会越来越多,打包出来的文件也会越来越大,从而造成网页在首次进入时比较缓慢。针对这个问题,首先想到的是分包的解决方案,将一个大文件分割成多个小文件,在第一次进入网页时可以提升加载速度。 + +## 区块分割(chunk split) + +根据 vite 官方文档提示,在vite的配置文件,通过 build.rollupOptions 的配置进行手动配置,代码如下: +``` +// vite.config.ts +import { fileURLToPath, URL } from 'node:url' +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import DefineOptions from 'unplugin-vue-define-options/vite' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue(), DefineOptions() ], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + }, + build: { + rollupOptions: { + output: { + manualChunks(id: any) { + // 最小化拆分包 + if (id.includes('node_modules')) { + return id.toString().split('node_modules/')[1].split('/')[0].toString() + } + } + } + } + } +}) + +``` + +通过上述优化,再一次进行 npm run bulid 打包,看一下结果 + +![image](src/assets/readme/2.png) + +这时候可以看出来,这样根据依赖分别拆分,打包出来的文件数量变多,单个文件的大小变小了。 +在这个基础上可以继续扩展,例如: + +### 1、根据文件分类和重命名,把css、png、js分开 + +``` +rollupOptions: { + output: { + // 用于命名代码拆分时创建的共享块的输出命名 + chunkFileNames: `assets/chunk/[name]-[hash].js`, + // 用于从入口点创建的块的打包输出格式 + entryFileNames: `assets/entry/[name]-[hash].js`, + // 用于输出静态资源的命名,打包后的目录中可能会出现png、jpg、svg、ttf、gif等目录。 + assetFileNames: `assets/[ext]/[name]-[hash].[ext]`, + manualChunks(id: string) { + // 最小化拆分包 + if (id.includes('node_modules')) { + return id.toString().split('node_modules/')[1].split('/')[0].toString() + } + } + } + } +``` +通过chunkFileNames、entryFileNames、assetFileNames实现分包和重命名,效果如下 + +![image](src/assets/readme/3.png) + +### 2、将业务模块分块打包,把第三方插件和实际业务模块分开 + +根据实际项目的具体情况分模块,比如我的 views 中,一个文件夹就是一个模块;我还想让css和图片就统一在assets中,重新规划一下文件,代码如下: + +``` + build: { + rollupOptions: { + output: { + // 按照一个模块一个文件,而且与第三方区分开 + chunkFileNames: (chunkInfo) => { + const { name, isDynamicEntry } = chunkInfo + if (isDynamicEntry) { + return `js/views/${name}-[hash].js` + } + return `js/vendor/${name}-[hash].js` + }, + // 用于从入口点创建的块的打包输出格式 + entryFileNames: `js/[name]-[hash].js`, + // assetFileNames 不设置 所有css和图片文件就默认在assets中 + // assetFileNames: `assets/[ext]/[name]-[hash].[ext]`, + manualChunks(id: string) { + // 最小化拆分包 + if (id.includes('node_modules')) { + return id.toString().split('node_modules/')[1].split('/')[0].toString() + } + // 一个模块只要一个文件,如果需要一个vue一个文件,以下代码可忽略 + if (id.includes('/src/views/')) { + return id.toString().split('/src/views/')[1].split('/')[0] + } + } + } + } + } +``` +效果如下: + +![image](src/assets/readme/4.png) + + +### 3、第三方代码分包后,过于琐碎,只单独提出个别大文件 + +例如:我要拆分出来vue、element-plus、fit2cloud-ui-plus、axios + +``` + build: { + rollupOptions: { + output: { + // 用于命名代码拆分时创建的共享块的输出命名 + chunkFileNames: (chunkInfo) => { + const { name, isDynamicEntry } = chunkInfo + if (isDynamicEntry) { + return `js/views/${name}-[hash].js` + } + return `js/vendor/${name}-[hash].js` + }, + // 用于从入口点创建的块的打包输出格式 + entryFileNames: `js/[name]-[hash].js`, + // 用于输出静态资源的命名,打包后的目录中可能会出现png、jpg、svg、ttf、gif等目录。 + // assetFileNames: `assets/[ext]/[name]-[hash].[ext]`, + manualChunks(id: string) { + // 根据不同模块 + if (id.includes('/src/views/')) { + return id.toString().split('/src/views/')[1].split('/')[0] + } + if (id.includes('node_modules')) { + if (id.includes('vue')) { + return 'vue' + } else if (id.includes('element-plus')) { + return 'element-plus' + } else if (id.includes('fit2cloud-ui-plus')) { + return 'fit2cloud-ui-plus' + } else if (id.includes('axios')) { + return 'axios' + } + return 'vendor' + } + } + } + } + } +``` +效果如下: + +![image](src/assets/readme/5.png) + +当然 vendor 和 vue 仍然可以进一步拆分,根据需要。 + +如果项目中有 echart 或者 富文本编辑器,只是想把这些单独打包,并不想复杂分类,那么也可以像以下代码这样,简洁配置 +``` + rollupOptions: { + output: { + manualChunks: { + editor: ['mavon-editor', '@kangc/v-md-editor'] + }, + }, + }, +``` +此外还有一些第三方的拆分插件工具可以,比如:vite-plugin-chunk-split。 + +### 4、删除不必要的依赖项或者使用 CDN + +可以通过 rollup-plugin-visualizer 插件进行可视化分析,找出哪些依赖项占用了最多的空间。然后,您可以考虑删除不必要的依赖项或将其替换为更轻量级的库。 + +``` +import { visualizer } from 'rollup-plugin-visualizer' +export default defineConfig({ + plugins: [ + // ... + visualizer() + // ... + ], +}); ``` +依赖项也可以引入外部CDN库???? + +## 打包压缩 + +对文件进一步压缩,让文件更小,以下是打包压缩的几种方法: + +### 1、build.minify -### Compile and Hot-Reload for Development +vite官网有介绍,build.minify 包括两个模式,'terser' 和 'esbuild',build.minify开启以后,默认是为 esbuild,它比 terser 快 20-40 倍,压缩率只差 1%-2%。当设置为 'terser' 时必须先安装 Terser。 -```sh -npm run dev ``` +npm add -D terser +``` + +然后用 build.terserOptions 对 terser 进行配置。 +但是也要注意,在 lib 模式下使用 'es' 时,build.minify 选项不会缩减空格,因为会移除掉 pure 标注,导致破坏 tree-shaking。 -### Type-Check, Compile and Minify for Production +``` + build: { + minify: 'terser', + // 去掉 console、debug + terserOptions: { + compress: { + drop_console: true, + drop_debugger: true, + }, + }, + ... + } +``` +对比一下配置 terser 之后,打包出来的文件大小 -```sh -npm run build +![image](src/assets/readme/6.png) + +文件确实小了那么一些些,可以根据项目需要选择是否用这种模式打包。也可以区分出来开发环境和生产环境的配置,避免影响调试。 + +### 2、vite-plugin-compression + +vite-plugin-compression 插件,可以自动在构建时进行 gzip 压缩,并支持多种压缩算法。 + +安装插件 + +``` +npm install vite-plugin-compression -D +``` +然后在 vite.config.ts 中进行如下配置: +``` + plugins: [ + vue(), + viteCompression({ + // gzip静态资源压缩配置 + verbose: true, // 是否在控制台输出压缩结果 + disable: false, // 是否禁用压缩 + threshold: 10240, // 启用压缩的文件大小限制 + algorithm: 'gzip', // 采用的压缩算法 + ext: '.gz', // 生成的压缩包后缀 + }), + ], ``` -### Lint with [ESLint](https://eslint.org/) +![image](src/assets/readme/7.png) + +此时打包文件夹中多出几个 gz 结尾的文件,文件大小会比没压缩之前小了一些些,但是此方法也会存在一些缺点: +- 压缩的静态文件需要消耗一定的 CPU 和内存资源; +- 针对个别大文件可以进行进一步压缩,不是很大的文件不建议这样处理,因为浏览器解压时间可能大于请求原来资源的时间,反而适得其反; +- 在某些情况下,压缩算法可能会导致压缩后的文件无法正常解压或运行,因此需要进行充分的测试和验证。 + + +此外也有其他压缩插件,比如 rollup-plugin-gzip,功能是一样的,缺点也是增加 CPU 消耗;配合vite的内置压缩,更推荐 vite-plugin-compression。也有图片和 css 的压缩工具 vite-plugin-imagemin 等等。 + +## 三、懒加载和异步组件 + +通过懒加载模块避免一次加载所以模块,然后每个模块中还可以使用异步加载,加速网站响应速度,提高用户体验。 + +### 1、defineAsyncComponent + +在 Vue 2.x 中,声明一个异步组件只需这样: + +``` +const asyncPage = () => import('./views/home.vue') + +``` + +在 Vue 3.x 中,声明一个异步组件只需这样: + +``` +import { defineAsyncComponent } from 'vue' +const child = defineAsyncComponent(() => import('@/components/async-component-child.vue')) + +``` -```sh -npm run lint ``` +const AsyncComponent = defineAsyncComponent({ + loader: () => import('./AsyncComponent.vue'), + delay: 200, + timeout: 3000 +}) +``` \ No newline at end of file diff --git a/auto-imports.d.ts b/auto-imports.d.ts new file mode 100644 index 0000000..918aad8 --- /dev/null +++ b/auto-imports.d.ts @@ -0,0 +1,8 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-auto-import +export {} +declare global { + +} diff --git a/components.d.ts b/components.d.ts new file mode 100644 index 0000000..05b19e0 --- /dev/null +++ b/components.d.ts @@ -0,0 +1,32 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +import '@vue/runtime-core' + +export {} + +declare module '@vue/runtime-core' { + export interface GlobalComponents { + BackButton: typeof import('./src/components/back-button/index.vue')['default'] + ElButton: typeof import('element-plus/es')['ElButton'] + ElCard: typeof import('element-plus/es')['ElCard'] + ElCol: typeof import('element-plus/es')['ElCol'] + ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] + ElContainer: typeof import('element-plus/es')['ElContainer'] + ElIcon: typeof import('element-plus/es')['ElIcon'] + ElInput: typeof import('element-plus/es')['ElInput'] + ElMenu: typeof import('element-plus/es')['ElMenu'] + ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] + ElRow: typeof import('element-plus/es')['ElRow'] + ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] + ElTag: typeof import('element-plus/es')['ElTag'] + LabelValue: typeof import('./src/components/view-card/label-value/index.vue')['default'] + LayoutContent: typeof import('./src/components/layout-content/index.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + ViewCard: typeof import('./src/components/view-card/index.vue')['default'] + } +} diff --git a/env.d.ts b/env.d.ts index 4a7fbe7..4984f13 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1,2 +1,2 @@ /// -declare module 'path-browserify' +declare module 'path-browserify' \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c759689..30d1e9e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,11 +29,14 @@ "eslint-plugin-vue": "^9.9.0", "npm-run-all": "^4.1.5", "prettier": "^2.8.4", + "rollup-plugin-visualizer": "^5.9.0", "sass": "^1.60.0", "sass-loader": "^13.2.2", + "terser": "^5.16.8", "typescript": "~4.8.4", "unplugin-vue-macros": "^1.11.2", "vite": "^4.1.4", + "vite-plugin-compression": "^0.5.1", "vite-svg-loader": "^4.0.0", "vue-tsc": "^1.2.0" } @@ -612,7 +615,6 @@ "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", "devOptional": true, - "peer": true, "dependencies": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -627,7 +629,6 @@ "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", "devOptional": true, - "peer": true, "engines": { "node": ">=6.0.0" } @@ -637,7 +638,6 @@ "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "devOptional": true, - "peer": true, "engines": { "node": ">=6.0.0" } @@ -647,7 +647,6 @@ "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.2.tgz", "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", "devOptional": true, - "peer": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -664,7 +663,6 @@ "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", "devOptional": true, - "peer": true, "dependencies": { "@jridgewell/resolve-uri": "3.1.0", "@jridgewell/sourcemap-codec": "1.4.14" @@ -1996,8 +1994,7 @@ "version": "1.1.2", "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz", "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "devOptional": true, - "peer": true + "devOptional": true }, "node_modules/call-bind": { "version": "1.0.2", @@ -2091,6 +2088,20 @@ "tiny-emitter": "^2.0.0" } }, + "node_modules/cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmmirror.com/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "dependencies": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", @@ -2124,8 +2135,7 @@ "version": "2.20.3", "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "devOptional": true, - "peer": true + "devOptional": true }, "node_modules/concat-map": { "version": "0.0.1", @@ -2309,6 +2319,15 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/define-lazy-prop": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", + "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/define-properties": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz", @@ -2427,6 +2446,12 @@ "vue": "^3.2.0" } }, + "node_modules/emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, "node_modules/enhanced-resolve": { "version": "5.12.0", "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz", @@ -2897,7 +2922,6 @@ "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", "dev": true, - "peer": true, "engines": { "node": ">=6" } @@ -3519,6 +3543,20 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3564,6 +3602,15 @@ "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", "dev": true }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true, + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, "node_modules/get-intrinsic": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz", @@ -3937,6 +3984,18 @@ "node": ">= 0.4" } }, + "node_modules/is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true, + "bin": { + "is-docker": "cli.js" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz", @@ -3946,6 +4005,15 @@ "node": ">=0.10.0" } }, + "node_modules/is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz", @@ -4068,6 +4136,18 @@ "call-bind": "^1.0.2" } }, + "node_modules/is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "dependencies": { + "is-docker": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz", @@ -4145,6 +4225,18 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, "node_modules/klona": { "version": "2.0.6", "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz", @@ -4710,6 +4802,20 @@ "wrappy": "1" } }, + "node_modules/open": { + "version": "8.4.2", + "resolved": "https://registry.npmmirror.com/open/-/open-8.4.2.tgz", + "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "dev": true, + "dependencies": { + "define-lazy-prop": "^2.0.0", + "is-docker": "^2.1.1", + "is-wsl": "^2.2.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/optionator": { "version": "0.9.1", "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.1.tgz", @@ -5055,6 +5161,15 @@ "node": ">= 0.4" } }, + "node_modules/require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz", @@ -5115,6 +5230,41 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-plugin-visualizer": { + "version": "5.9.0", + "resolved": "https://registry.npmmirror.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.0.tgz", + "integrity": "sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==", + "dev": true, + "dependencies": { + "open": "^8.4.0", + "picomatch": "^2.3.1", + "source-map": "^0.7.4", + "yargs": "^17.5.1" + }, + "bin": { + "rollup-plugin-visualizer": "dist/bin/cli.js" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "rollup": "2.x || 3.x" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/rollup-plugin-visualizer/node_modules/source-map": { + "version": "0.7.4", + "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.7.4.tgz", + "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz", @@ -5320,7 +5470,6 @@ "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", "devOptional": true, - "peer": true, "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -5369,6 +5518,20 @@ "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" }, + "node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/string.prototype.padend": { "version": "3.1.4", "resolved": "https://registry.npmmirror.com/string.prototype.padend/-/string.prototype.padend-3.1.4.tgz", @@ -5513,7 +5676,6 @@ "resolved": "https://registry.npmmirror.com/terser/-/terser-5.16.8.tgz", "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==", "devOptional": true, - "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", @@ -5682,6 +5844,15 @@ "which-boxed-primitive": "^1.0.2" } }, + "node_modules/universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/unplugin": { "version": "1.3.1", "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.3.1.tgz", @@ -5866,6 +6037,20 @@ } } }, + "node_modules/vite-plugin-compression": { + "version": "0.5.1", + "resolved": "https://registry.npmmirror.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz", + "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==", + "dev": true, + "dependencies": { + "chalk": "^4.1.2", + "debug": "^4.3.3", + "fs-extra": "^10.0.0" + }, + "peerDependencies": { + "vite": ">=2.0.0" + } + }, "node_modules/vite-svg-loader": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz", @@ -6120,6 +6305,20 @@ "node": ">=0.10.0" } }, + "node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz", @@ -6135,12 +6334,48 @@ "node": ">=12" } }, + "node_modules/y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/yargs": { + "version": "17.7.1", + "resolved": "https://registry.npmmirror.com/yargs/-/yargs-17.7.1.tgz", + "integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==", + "dev": true, + "dependencies": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -6472,7 +6707,6 @@ "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", "devOptional": true, - "peer": true, "requires": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -6483,22 +6717,19 @@ "version": "3.1.0", "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", - "devOptional": true, - "peer": true + "devOptional": true }, "@jridgewell/set-array": { "version": "1.1.2", "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", - "devOptional": true, - "peer": true + "devOptional": true }, "@jridgewell/source-map": { "version": "0.3.2", "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.2.tgz", "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", "devOptional": true, - "peer": true, "requires": { "@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -6515,7 +6746,6 @@ "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", "devOptional": true, - "peer": true, "requires": { "@jridgewell/resolve-uri": "3.1.0", "@jridgewell/sourcemap-codec": "1.4.14" @@ -7563,8 +7793,7 @@ "version": "1.1.2", "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz", "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "devOptional": true, - "peer": true + "devOptional": true }, "call-bind": { "version": "1.0.2", @@ -7643,6 +7872,17 @@ "tiny-emitter": "^2.0.0" } }, + "cliui": { + "version": "8.0.1", + "resolved": "https://registry.npmmirror.com/cliui/-/cliui-8.0.1.tgz", + "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==", + "dev": true, + "requires": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.1", + "wrap-ansi": "^7.0.0" + } + }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz", @@ -7670,8 +7910,7 @@ "version": "2.20.3", "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "devOptional": true, - "peer": true + "devOptional": true }, "concat-map": { "version": "0.0.1", @@ -7822,6 +8061,12 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "define-lazy-prop": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", + "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "dev": true + }, "define-properties": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/define-properties/-/define-properties-1.2.0.tgz", @@ -7922,6 +8167,12 @@ "normalize-wheel-es": "^1.2.0" } }, + "emoji-regex": { + "version": "8.0.0", + "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true + }, "enhanced-resolve": { "version": "5.12.0", "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz", @@ -8192,8 +8443,7 @@ "version": "3.1.1", "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz", "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true, - "peer": true + "dev": true }, "escape-html": { "version": "1.0.3", @@ -8645,6 +8895,17 @@ } } }, + "fs-extra": { + "version": "10.1.0", + "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-10.1.0.tgz", + "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==", + "dev": true, + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -8680,6 +8941,12 @@ "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", "dev": true }, + "get-caller-file": { + "version": "2.0.5", + "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz", + "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", + "dev": true + }, "get-intrinsic": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz", @@ -8993,12 +9260,24 @@ "has-tostringtag": "^1.0.0" } }, + "is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true + }, "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "devOptional": true }, + "is-fullwidth-code-point": { + "version": "3.0.0", + "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true + }, "is-glob": { "version": "4.0.3", "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz", @@ -9094,6 +9373,15 @@ "call-bind": "^1.0.2" } }, + "is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "requires": { + "is-docker": "^2.0.0" + } + }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz", @@ -9164,6 +9452,16 @@ "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", "dev": true }, + "jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dev": true, + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^2.0.0" + } + }, "klona": { "version": "2.0.6", "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz", @@ -9623,6 +9921,17 @@ "wrappy": "1" } }, + "open": { + "version": "8.4.2", + "resolved": "https://registry.npmmirror.com/open/-/open-8.4.2.tgz", + "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "dev": true, + "requires": { + "define-lazy-prop": "^2.0.0", + "is-docker": "^2.1.1", + "is-wsl": "^2.2.0" + } + }, "optionator": { "version": "0.9.1", "resolved": "https://registry.npmmirror.com/optionator/-/optionator-0.9.1.tgz", @@ -9868,6 +10177,12 @@ "functions-have-names": "^1.2.2" } }, + "require-directory": { + "version": "2.1.1", + "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz", + "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", + "dev": true + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz", @@ -9908,6 +10223,26 @@ "fsevents": "~2.3.2" } }, + "rollup-plugin-visualizer": { + "version": "5.9.0", + "resolved": "https://registry.npmmirror.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.0.tgz", + "integrity": "sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==", + "dev": true, + "requires": { + "open": "^8.4.0", + "picomatch": "^2.3.1", + "source-map": "^0.7.4", + "yargs": "^17.5.1" + }, + "dependencies": { + "source-map": { + "version": "0.7.4", + "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.7.4.tgz", + "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", + "dev": true + } + } + }, "run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz", @@ -10056,7 +10391,6 @@ "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", "devOptional": true, - "peer": true, "requires": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -10104,6 +10438,17 @@ "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" }, + "string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + } + }, "string.prototype.padend": { "version": "3.1.4", "resolved": "https://registry.npmmirror.com/string.prototype.padend/-/string.prototype.padend-3.1.4.tgz", @@ -10217,7 +10562,6 @@ "resolved": "https://registry.npmmirror.com/terser/-/terser-5.16.8.tgz", "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==", "devOptional": true, - "peer": true, "requires": { "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", @@ -10335,6 +10679,12 @@ "which-boxed-primitive": "^1.0.2" } }, + "universalify": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz", + "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==", + "dev": true + }, "unplugin": { "version": "1.3.1", "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.3.1.tgz", @@ -10445,6 +10795,17 @@ "rollup": "^3.18.0" } }, + "vite-plugin-compression": { + "version": "0.5.1", + "resolved": "https://registry.npmmirror.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz", + "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==", + "dev": true, + "requires": { + "chalk": "^4.1.2", + "debug": "^4.3.3", + "fs-extra": "^10.0.0" + } + }, "vite-svg-loader": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz", @@ -10645,6 +11006,17 @@ "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", "dev": true }, + "wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } + }, "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz", @@ -10657,12 +11029,39 @@ "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==", "dev": true }, + "y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmmirror.com/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", + "dev": true + }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "yargs": { + "version": "17.7.1", + "resolved": "https://registry.npmmirror.com/yargs/-/yargs-17.7.1.tgz", + "integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==", + "dev": true, + "requires": { + "cliui": "^8.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.3", + "y18n": "^5.0.5", + "yargs-parser": "^21.1.1" + } + }, + "yargs-parser": { + "version": "21.1.1", + "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-21.1.1.tgz", + "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", + "dev": true + }, "yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 12137ba..f50d83d 100644 --- a/package.json +++ b/package.json @@ -33,11 +33,14 @@ "eslint-plugin-vue": "^9.9.0", "npm-run-all": "^4.1.5", "prettier": "^2.8.4", + "rollup-plugin-visualizer": "^5.9.0", "sass": "^1.60.0", "sass-loader": "^13.2.2", + "terser": "^5.16.8", "typescript": "~4.8.4", "unplugin-vue-macros": "^1.11.2", "vite": "^4.1.4", + "vite-plugin-compression": "^0.5.1", "vite-svg-loader": "^4.0.0", "vue-tsc": "^1.2.0" } diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/readme/1.png b/src/assets/readme/1.png new file mode 100644 index 0000000..2553004 Binary files /dev/null and b/src/assets/readme/1.png differ diff --git a/src/assets/readme/2.png b/src/assets/readme/2.png new file mode 100644 index 0000000..05ced5e Binary files /dev/null and b/src/assets/readme/2.png differ diff --git a/src/assets/readme/3.png b/src/assets/readme/3.png new file mode 100644 index 0000000..f0472ca Binary files /dev/null and b/src/assets/readme/3.png differ diff --git a/src/assets/readme/4.png b/src/assets/readme/4.png new file mode 100644 index 0000000..9f0f83c Binary files /dev/null and b/src/assets/readme/4.png differ diff --git a/src/assets/readme/5.png b/src/assets/readme/5.png new file mode 100644 index 0000000..a035540 Binary files /dev/null and b/src/assets/readme/5.png differ diff --git a/src/assets/readme/6.png b/src/assets/readme/6.png new file mode 100644 index 0000000..df02e64 Binary files /dev/null and b/src/assets/readme/6.png differ diff --git a/src/assets/readme/7.png b/src/assets/readme/7.png new file mode 100644 index 0000000..47b56b1 Binary files /dev/null and b/src/assets/readme/7.png differ diff --git a/src/router/index.ts b/src/router/index.ts index b0e735c..6dcb9b2 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,6 +1,8 @@ +import { defineAsyncComponent } from 'vue' import { type RouteRecordRaw, createRouter, createWebHistory } from 'vue-router' -export const Layout = () => import('@/layout/index.vue') +export const Layout = defineAsyncComponent(() => import('@/layout/index.vue')) +const _import = (path: String) => defineAsyncComponent(() => import(`/src/views/${path}.vue`)) const modules: any = import.meta.glob('./modules/*.ts') /** 常驻路由 */ @@ -25,14 +27,14 @@ export const constantRoutes: RouteRecordRaw[] = [ { path: '/403', - component: () => import('@/views/error-page/403.vue'), + component: _import('error-page/403'), meta: { hidden: true } }, { path: '/404', - component: () => import('@/views/error-page/404.vue'), + component: _import('error-page/404'), meta: { hidden: true }, @@ -49,7 +51,7 @@ export const constantRoutes: RouteRecordRaw[] = [ children: [ { path: 'docs', - component: () => import('@/views/router-demo/RouterDocs.vue'), + component: _import('router-demo/RouterDocs'), name: 'RouterDocs', meta: { title: '官方文档' @@ -57,7 +59,7 @@ export const constantRoutes: RouteRecordRaw[] = [ }, { path: 'menu', - component: () => import('@/views/router-demo/RouterMenu.vue'), + component: _import('router-demo/RouterMenu'), name: 'RouterMenu', meta: { title: '路由与菜单' @@ -65,7 +67,7 @@ export const constantRoutes: RouteRecordRaw[] = [ }, { path: 'detail', - component: () => import('@/views/router-demo/RouterDetail.vue'), + component: _import('router-demo/RouterDetail'), name: 'RouterDetail', meta: { activeMenu: '/router-demo/menu', @@ -74,7 +76,7 @@ export const constantRoutes: RouteRecordRaw[] = [ }, { path: 'keep-alive', - component: () => import('@/views/router-demo/RouterKeepAlive.vue'), + component: _import('router-demo/RouterKeepAlive'), name: 'RouterKeepAlive', meta: { title: '组件缓存' @@ -82,7 +84,7 @@ export const constantRoutes: RouteRecordRaw[] = [ }, { path: 'keep-alive-detail', - component: () => import('@/views/router-demo/RouterKeepAliveDetail.vue'), + component: _import('router-demo/RouterKeepAliveDetail'), name: 'RouterKeepAliveDetail', // cache: true时,必须保证name与component中的name一致 meta: { cache: true, @@ -104,7 +106,7 @@ export const constantRoutes: RouteRecordRaw[] = [ children: [ { path: 'layout-content', - component: () => import('@/views/components/LayoutContentDemo.vue'), + component: _import('components/LayoutContentDemo'), name: 'LayoutContentDemo', meta: { title: '页面布局' @@ -112,7 +114,7 @@ export const constantRoutes: RouteRecordRaw[] = [ }, { path: 'card-view', - component: () => import('@/views/components/ViewCardDemo.vue'), + component: _import('components/ViewCardDemo'), name: 'ViewCardDemo', meta: { title: '查看Card' diff --git a/stats.html b/stats.html new file mode 100644 index 0000000..9b09e9e --- /dev/null +++ b/stats.html @@ -0,0 +1,6177 @@ + + + + + + + + Rollup Visualizer + + + +
+ + + + + diff --git a/vite.config.ts b/vite.config.ts index f2afb63..a94cf62 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,16 +1,77 @@ import { fileURLToPath, URL } from 'node:url' - import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import svgLoader from 'vite-svg-loader' import DefineOptions from 'unplugin-vue-define-options/vite' +import { visualizer } from 'rollup-plugin-visualizer' +import viteCompression from 'vite-plugin-compression' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [vue(), DefineOptions(), svgLoader()], + plugins: [ + vue(), + viteCompression({ + // gzip静态资源压缩配置 + verbose: true, // 是否在控制台输出压缩结果 + disable: false, // 是否禁用压缩 + threshold: 10240, // 启用压缩的文件大小限制 + algorithm: 'gzip', // 采用的压缩算法 + ext: '.gz', // 生成的压缩包后缀 + }), + DefineOptions(), + svgLoader(), + visualizer() + ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } + }, + build: { + minify: 'terser', + emptyOutDir: true, //打包前先清空原有打包文件 + //生产环境时移除console + terserOptions: { + compress: { + drop_console: true, + drop_debugger: true + } + }, + rollupOptions: { + output: { + // 用于命名代码拆分时创建的共享块的输出命名 + chunkFileNames: (chunkInfo) => { + const { name, isDynamicEntry } = chunkInfo + if (isDynamicEntry) { + return `js/views/${name}-[hash].js` + } + return `js/vendor/${name}-[hash].js` + }, + // 用于从入口点创建的块的打包输出格式 + entryFileNames: `js/[name]-[hash].js`, + // 用于输出静态资源的命名,打包后的目录中可能会出现png、jpg、svg、ttf、gif等目录。 + // assetFileNames: `assets/[ext]/[name]-[hash].[ext]`, + manualChunks(id: string) { + // 根据不同模块 + if (id.includes('/src/views/')) { + return id.toString().split('/src/views/')[1].split('/')[0] + } + if (id.includes('node_modules')) { + if (id.includes('vue')) { + return 'vue' + } else if (id.includes('element-plus')) { + return 'element-plus' + } else if (id.includes('fit2cloud-ui-plus')) { + return 'fit2cloud-ui-plus' + } else if (id.includes('axios')) { + return 'axios' + } + return 'vendor' + } + } + } + } + }, + server: { } })