From 49cdcf216f8a6aea9de3435c679fe7cb6ae3478d Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 26 Oct 2022 19:51:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=89=93=E5=8C=85?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E5=90=AF=E5=8A=A8`cdn`=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E5=BA=93=E9=85=8D=E7=BD=AE=EF=BC=8C=E9=BB=98?= =?UTF-8?q?=E8=AE=A4`false`=E4=B8=8D=E5=90=AF=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.production | 5 ++++- .env.staging | 3 +++ build/cdn.ts | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ build/index.ts | 3 ++- build/plugins.ts | 8 ++++++- package.json | 1 + pnpm-lock.yaml | 39 ++++++++++++++++++++++++++++++++ types/global.d.ts | 1 + vite.config.ts | 3 ++- 9 files changed, 126 insertions(+), 4 deletions(-) create mode 100644 build/cdn.ts diff --git a/.env.production b/.env.production index 2ad8331..fdaa412 100644 --- a/.env.production +++ b/.env.production @@ -8,4 +8,7 @@ VITE_ROUTER_HISTORY = "hash" VITE_PROXY_DOMAIN_REAL = "" # 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false -VITE_LEGACY = false \ No newline at end of file +VITE_LEGACY = false + +# 是否在打包时使用cdn替换本地库 替换 true 不替换 false +VITE_CDN = false \ No newline at end of file diff --git a/.env.staging b/.env.staging index a14e98b..73836d2 100644 --- a/.env.staging +++ b/.env.staging @@ -12,3 +12,6 @@ VITE_PROXY_DOMAIN_REAL = "" # 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false VITE_LEGACY = false + +# 是否在打包时使用cdn替换本地库 替换 true 不替换 false +VITE_CDN = false \ No newline at end of file diff --git a/build/cdn.ts b/build/cdn.ts new file mode 100644 index 0000000..20f24ad --- /dev/null +++ b/build/cdn.ts @@ -0,0 +1,67 @@ +import { Plugin as importToCDN } from "vite-plugin-cdn-import"; + +/** + * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true） + * 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com + * 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求 + * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn + */ +export const cdn = importToCDN({ + //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path） + prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}", + modules: [ + { + name: "vue", + var: "Vue", + path: "vue.global.prod.min.js" + }, + { + name: "vue-router", + var: "VueRouter", + path: "vue-router.global.min.js" + }, + { + name: "vue-i18n", + var: "VueI18n", + path: "vue-i18n.runtime.global.prod.min.js" + }, + // 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77） + { + name: "vue-demi", + var: "VueDemi", + path: "index.iife.min.js" + }, + { + name: "pinia", + var: "Pinia", + path: "pinia.iife.min.js" + }, + { + name: "element-plus", + var: "ElementPlus", + path: "index.full.min.js", + css: "index.min.css" + }, + { + name: "axios", + var: "axios", + path: "axios.min.js" + }, + { + name: "dayjs", + var: "dayjs", + path: "dayjs.min.js" + }, + { + name: "echarts", + var: "echarts", + path: "echarts.min.js" + }, + { + name: "lodash", + var: "lodash", + // 可写`完整路径`，会替换`prodUrl` + path: "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js" + } + ] +}); diff --git a/build/index.ts b/build/index.ts index 192bb7b..3bbb16a 100644 --- a/build/index.ts +++ b/build/index.ts @@ -7,7 +7,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => { VITE_PROXY_DOMAIN: "", VITE_PROXY_DOMAIN_REAL: "", VITE_ROUTER_HISTORY: "", - VITE_LEGACY: false + VITE_LEGACY: false, + VITE_CDN: false }; for (const envName of Object.keys(envConf)) { diff --git a/build/plugins.ts b/build/plugins.ts index ccb8915..0ed3220 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -1,3 +1,4 @@ +import { cdn } from "./cdn"; import { resolve } from "path"; import vue from "@vitejs/plugin-vue"; import { viteBuildInfo } from "./info"; @@ -13,7 +14,11 @@ import themePreprocessorPlugin from "@pureadmin/theme"; import { genScssMultipleScopeVars } from "/@/layout/theme"; import DefineOptions from "unplugin-vue-define-options/vite"; -export function getPluginsList(command, VITE_LEGACY) { +export function getPluginsList( + command: string, + VITE_LEGACY: boolean, + VITE_CDN: boolean +) { const prodMock = true; const lifecycle = process.env.npm_lifecycle_event; return [ @@ -26,6 +31,7 @@ export function getPluginsList(command, VITE_LEGACY) { }), // jsx、tsx语法支持 vueJsx(), + VITE_CDN ? cdn : null, DefineOptions(), // 线上环境删除console removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }), diff --git a/package.json b/package.json index e20c450..33c3d68 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "typescript": "^4.7.4", "unplugin-vue-define-options": "0.7.3", "vite": "^3.1.8", + "vite-plugin-cdn-import": "^0.3.5", "vite-plugin-mock": "^2.9.6", "vite-plugin-remove-console": "^1.1.0", "vite-svg-loader": "^3.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf9bd64..640e0c2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -81,6 +81,7 @@ specifiers: typescript: ^4.7.4 unplugin-vue-define-options: 0.7.3 vite: ^3.1.8 + vite-plugin-cdn-import: ^0.3.5 vite-plugin-mock: ^2.9.6 vite-plugin-remove-console: ^1.1.0 vite-svg-loader: ^3.6.0 @@ -182,6 +183,7 @@ devDependencies: typescript: 4.8.4 unplugin-vue-define-options: 0.7.3_vite@3.1.8+vue@3.2.41 vite: 3.1.8_sass@1.55.0+terser@5.15.1 + vite-plugin-cdn-import: 0.3.5 vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.1.8 vite-plugin-remove-console: 1.1.0 vite-svg-loader: 3.6.0 @@ -4670,6 +4672,15 @@ packages: } engines: { node: ">=0.10.0" } + /is-reference/1.2.1: + resolution: + { + integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ== + } + dependencies: + "@types/estree": 0.0.39 + dev: true + /is-regexp/1.0.0: resolution: { @@ -6524,6 +6535,23 @@ packages: glob: 7.2.3 dev: true + /rollup-plugin-external-globals/0.6.1: + resolution: + { + integrity: sha512-mlp3KNa5sE4Sp9UUR2rjBrxjG79OyZAh/QC18RHIjM+iYkbBwNXSo8DHRMZWtzJTrH8GxQ+SJvCTN3i14uMXIA== + } + peerDependencies: + rollup: ^2.25.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + "@rollup/pluginutils": 4.2.1 + estree-walker: 2.0.2 + is-reference: 1.2.1 + magic-string: 0.25.9 + dev: true + /rollup-plugin-visualizer/5.8.3: resolution: { @@ -7499,6 +7527,17 @@ packages: spdx-expression-parse: 3.0.1 dev: true + /vite-plugin-cdn-import/0.3.5: + resolution: + { + integrity: sha512-e1raoalfBiIhv+hnMeSp1UNjloDDBhHpeFxkwRRdPBmTdDRqdEEn8owUmT5u8UBSVCs4xN3n/od4a91vXEhXPQ== + } + dependencies: + rollup-plugin-external-globals: 0.6.1 + transitivePeerDependencies: + - rollup + dev: true + /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.1.8: resolution: { diff --git a/types/global.d.ts b/types/global.d.ts index a8caa0e..fef55f2 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -81,6 +81,7 @@ declare global { VITE_PROXY_DOMAIN_REAL: string; VITE_ROUTER_HISTORY: string; VITE_LEGACY: boolean; + VITE_CDN: boolean; } declare interface ServerConfigs { diff --git a/vite.config.ts b/vite.config.ts index 46e3270..886681a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -27,6 +27,7 @@ const __APP_INFO__ = { export default ({ command, mode }: ConfigEnv): UserConfigExport => { const { + VITE_CDN, VITE_PORT, VITE_LEGACY, VITE_PUBLIC_PATH, @@ -59,7 +60,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => { } : null }, - plugins: getPluginsList(command, VITE_LEGACY), + plugins: getPluginsList(command, VITE_LEGACY, VITE_CDN), optimizeDeps: { include: ["pinia", "vue-i18n", "lodash-es", "@vueuse/core", "dayjs"], exclude: ["@pureadmin/theme/dist/browser-utils"]