From ada955fc7bdd0196f4cba2d6aaf2354fdd9cded9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com> Date: Sat, 6 Aug 2022 15:01:39 +0800 Subject: [PATCH] =?UTF-8?q?perf(projects):=20=E6=B7=BB=E5=8A=A0unocss?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=89=93=E5=8C=85?= =?UTF-8?q?=E5=88=86=E6=9E=90=E6=8F=92=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.production | 7 +++++-- .gitignore | 1 + build/plugins/index.ts | 8 ++++++-- build/plugins/unocss.ts | 5 ++++- build/plugins/visualizer.ts | 6 ++++++ package.json | 1 + src/layouts/BasicLayout/index.vue | 2 +- src/types/env.d.ts | 2 ++ src/views/test/test1.vue | 4 ++-- src/views/test/test2.vue | 5 +++++ vite.config.ts | 2 +- 11 files changed, 34 insertions(+), 9 deletions(-) create mode 100644 build/plugins/visualizer.ts diff --git a/.env.production b/.env.production index 8b0b652..98dff9b 100644 --- a/.env.production +++ b/.env.production @@ -1,5 +1,8 @@ # 是否开启压缩资源 VITE_COMPRESS_OPEN=N -# gzip | brotliCompress | deflate | deflateRaw -VITE_COMPRESS_TYPE=gzip \ No newline at end of file +# 压缩算法 gzip | brotliCompress | deflate | deflateRaw +VITE_COMPRESS_TYPE=gzip + +# 是否开启打包依赖分析 +VITE_VISUALIZER=N diff --git a/.gitignore b/.gitignore index d710410..882137c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,7 @@ node_modules dist dist-ssr *.local +stats.html # Editor directories and files .vscode/* diff --git a/build/plugins/index.ts b/build/plugins/index.ts index 1b2ba69..723b35b 100644 --- a/build/plugins/index.ts +++ b/build/plugins/index.ts @@ -2,6 +2,7 @@ import vue from './vue'; import compress from './compress'; import html from './html'; import unocss from './unocss'; +import visualizer from './visualizer'; /** * @description: 设置vite插件配置 @@ -10,10 +11,13 @@ import unocss from './unocss'; */ export function setVitePlugins(env) { const plugins = [...vue, html(env), unocss]; - + // 是否压缩 if (env.VITE_COMPRESS_OPEN === 'Y') { plugins.push(compress(env)); } - + // 是否依赖分析 + if (env.VITE_VISUALIZER === 'Y') { + plugins.push(visualizer); + } return plugins; } diff --git a/build/plugins/unocss.ts b/build/plugins/unocss.ts index 06b7cc9..c8040e4 100644 --- a/build/plugins/unocss.ts +++ b/build/plugins/unocss.ts @@ -1,3 +1,6 @@ import Unocss from 'unocss/vite'; // https://github.com/unocss/unocss +import { presetUno, presetAttributify, presetIcons } from 'unocss'; -export default Unocss(); +export default Unocss({ + presets: [presetUno(), presetAttributify(), presetIcons()], +}); diff --git a/build/plugins/visualizer.ts b/build/plugins/visualizer.ts new file mode 100644 index 0000000..eea8649 --- /dev/null +++ b/build/plugins/visualizer.ts @@ -0,0 +1,6 @@ +import { visualizer } from 'rollup-plugin-visualizer'; // https://github.com/btd/rollup-plugin-visualizer +export default visualizer({ + gzipSize: true, + brotliSize: true, + open: true, +}); diff --git a/package.json b/package.json index e9a5031..19eb0e4 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "husky": "^8.0.0", "lint-staged": "^13.0.3", "prettier": "^2.7.1", + "rollup-plugin-visualizer": "^5.7.1", "typescript": "^4.6.4", "unocss": "^0.45.5", "vite": "^3.0.0", diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue index 718d7ab..830dfae 100644 --- a/src/layouts/BasicLayout/index.vue +++ b/src/layouts/BasicLayout/index.vue @@ -12,7 +12,7 @@ - diff --git a/src/types/env.d.ts b/src/types/env.d.ts index e57b60e..816ad0f 100644 --- a/src/types/env.d.ts +++ b/src/types/env.d.ts @@ -7,6 +7,8 @@ interface ImportMetaEnv { readonly VITE_HTTP_PROXY?: 'Y' | 'N'; /** 是否开启打包压缩 */ readonly VITE_COMPRESS?: 'Y' | 'N'; + /** 是否开启打包依赖分析 */ + readonly VITE_VISUALIZER?: 'Y' | 'N'; /** 压缩算法类型 */ readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'; /** hash路由模式 */ diff --git a/src/views/test/test1.vue b/src/views/test/test1.vue index 672bdb3..0e65823 100644 --- a/src/views/test/test1.vue +++ b/src/views/test/test1.vue @@ -1,6 +1,6 @@