diff --git a/.env.production b/.env.production index d23120a..9495de9 100644 --- a/.env.production +++ b/.env.production @@ -1,5 +1,8 @@ # baseUrl -VITE_BASE_API = '/' +VITE_BASE_API = "/" # 线上环境平台打包路径 -VITE_PUBLIC_PATH = / \ No newline at end of file +VITE_PUBLIC_PATH = "/" + +# 生产环境是否启用 cdn +VITE_CDN_DEPS = "false" \ No newline at end of file diff --git a/README.md b/README.md index f903a98..6bb00fc 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ - [x] ESLint - [x] 首屏加载动画 - [x] 开发环境调试面板 -- [ ] TODO: 生产环境 CDN 依赖 +- [x] 生产环境 CDN 依赖 **主分支默认 TypeScript，如果你希望使用的是 JavaScript 语言，请切换 [js-version](https://github.com/yulimchen/vue3-h5-template/tree/js-version) 分支进行开发** @@ -260,13 +260,9 @@ feat(layout): 布局完成 -### - CDN 生产环境依赖(TODO) +### - CDN 生产环境依赖 -本模板生产环境默认 CDN 加载依赖，依赖加载源见根目录 `dependencies-cdn.js` 文件。 - -**❗ PS.为避免打包后出现不可预估问题，请注意确保生产和开发环境的依赖版本一致！** - -> 如需关闭 CDN 依赖，在根目录生产环境变量文件 `.env.production` 中修改 `VUE_APP_CDN_DEPS` 的值为 `false` ，重新打包即可。 +本模板生产环境默认不开启 CDN 加载依赖，如需开启生产环境加载 CDN 依赖，在根目录生产环境变量文件 `.env.production` 中修改 `VITE_CDN_DEPS` 的值为 `true` 重新打包即可。 diff --git a/build/cdn.ts b/build/cdn.ts new file mode 100644 index 0000000..a72189b --- /dev/null +++ b/build/cdn.ts @@ -0,0 +1,12 @@ +import { cdn } from "vite-plugin-cdn2"; + +export function enableCDN(isEnabled: string) { + if (isEnabled === "true") { + return cdn({ + // url 可以更换为私有或其他源 + // url: "https://cdn.jsdelivr.net/npm/", + url: "https://unpkg.com/", + modules: ["vue", "vue-demi", "pinia", "axios", "vant", "vue-router"] + }); + } +} diff --git a/package.json b/package.json index 7c3917c..d7d90bf 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "typescript": "~5.2.2", "unplugin-vue-components": "^0.22.12", "vite": "^4.5.0", + "vite-plugin-cdn2": "^0.15.2", "vite-plugin-compression": "^0.5.1", "vite-plugin-html": "^3.2.0", "vite-plugin-mock-dev-server": "^0.3.21", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d55d6bf..5d1ab1c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -106,6 +106,9 @@ devDependencies: vite: specifier: ^4.5.0 version: 4.5.0(@types/node@18.18.6)(less@4.2.0) + vite-plugin-cdn2: + specifier: ^0.15.2 + version: 0.15.2 vite-plugin-compression: specifier: ^0.5.1 version: 0.5.1(vite@4.5.0) @@ -1580,6 +1583,91 @@ packages: - typescript dev: true + /@xn-sakina/rml-darwin-arm64@2.1.1: + resolution: {integrity: sha512-Ljog63oD8+riz/3zLN0pAgvJSaFTpJY4KxrH+TJnfEbUoRb7ZhmGEpYGl5imi43/9yNkGyAoF41ysIHxg0yEAw==} + engines: {node: '>=14'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-darwin-x64@2.1.1: + resolution: {integrity: sha512-uLeZKZFiygZntppOjbfGzU3YsFmx4joW/6UlKfCKwelrTrtKa3bYMz55NuFc2RW7IuuNrGEILwz+ZPUdfv3ykA==} + engines: {node: '>=14'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-linux-arm-gnueabihf@2.1.1: + resolution: {integrity: sha512-Ou/h5ma/jsbgcWS//BdRh4bb/5RFRjebc1Yrlm6iyqSRNJqnY58hEl8pc9feOSkrjorvc8aAe5CWZPf7sZrzrA==} + engines: {node: '>=14'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-linux-arm64-gnu@2.1.1: + resolution: {integrity: sha512-hmNtRDxxNc9LVEr/tlzgHOG2wKM0w1rPdIu2zvIVpVi8JUFcenEcHGLrezFlQg8NK/BMQiAmMmMpxhB9Mr4wpA==} + engines: {node: '>=14'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-linux-arm64-musl@2.1.1: + resolution: {integrity: sha512-sYY5m7fK1VhLodt4IDB+XSTmvu2g0D5VbT30RpBhXlL3CI37fgLyNvO+NSn9J6b4xrGqzdkIv677JfkhM9hHGw==} + engines: {node: '>=14'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-linux-x64-gnu@2.1.1: + resolution: {integrity: sha512-n9Q6DOUgc6U05YqgnwKmpMdrKk3K4JtUpB6Wee3kyxrQr1FKT6E5FXqzzO2q62AxXqWsc1WVNE6IWldURUI2Bg==} + engines: {node: '>=14'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-linux-x64-musl@2.1.1: + resolution: {integrity: sha512-4qq3jw6jqrL0L1A3Q1zIIl1392uamXycb6gws+RsWnNnaogVHa/QD47w9xTsVRVYqEfsroV+84OOvNSpaoBrQQ==} + engines: {node: '>=14'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-wasm@2.1.1: + resolution: {integrity: sha512-m2jV3ZOOD2iAcQao9y2BssS9vLBrx4Rh6a2SkEHyP17KytVYecHo+ewmgp7FQcn3YXvmtK1tun4zRyW146n/Bw==} + dev: true + + /@xn-sakina/rml-win32-arm64-msvc@2.1.1: + resolution: {integrity: sha512-QnsttcVOMvetJ0xZOsUSZ38hpAbydDGl4MwY4yGvKK0/6XbirKEq/bn3Zl9ABLX3elLaE/pghGSlxB9fsk70Qw==} + engines: {node: '>=14'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true + optional: true + + /@xn-sakina/rml-win32-x64-msvc@2.1.1: + resolution: {integrity: sha512-AnNynVvyfp3mBUA0fQFqBth13pFcRjOhCDieF73UYYH3xDc/mowtjDO+kUWW9EtZH94CPDkT1Ei9WWESruOg6w==} + engines: {node: '>=14'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true + optional: true + /JSONStream@1.3.5: resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==} hasBin: true @@ -5338,6 +5426,22 @@ packages: fsevents: 2.3.3 dev: true + /rs-module-lexer@2.1.1: + resolution: {integrity: sha512-6F5a6PS3PJ/qZ0o+FKFcqABFBVsaMIOEMA4yBFyAwJnCpQ6a8CIk+ln3pRPrl0N2k6HgAupzXpQq4NuTVg5haQ==} + engines: {node: '>=14'} + requiresBuild: true + optionalDependencies: + '@xn-sakina/rml-darwin-arm64': 2.1.1 + '@xn-sakina/rml-darwin-x64': 2.1.1 + '@xn-sakina/rml-linux-arm-gnueabihf': 2.1.1 + '@xn-sakina/rml-linux-arm64-gnu': 2.1.1 + '@xn-sakina/rml-linux-arm64-musl': 2.1.1 + '@xn-sakina/rml-linux-x64-gnu': 2.1.1 + '@xn-sakina/rml-linux-x64-musl': 2.1.1 + '@xn-sakina/rml-win32-arm64-msvc': 2.1.1 + '@xn-sakina/rml-win32-x64-msvc': 2.1.1 + dev: true + /run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} dependencies: @@ -6224,6 +6328,19 @@ packages: engines: {node: '>= 0.8'} dev: true + /vite-plugin-cdn2@0.15.2: + resolution: {integrity: sha512-aco0DQqeep+u+CGohn5k3U6TIjytLagbVr29SHd1r6LqcsC1ye+viW/65XyigrPLs7DfCk93yFhV0qOuepl/1g==} + dependencies: + '@babel/core': 7.23.2 + '@rollup/pluginutils': 5.0.5 + '@xn-sakina/rml-wasm': 2.1.1 + debug: 4.3.4 + rs-module-lexer: 2.1.1 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /vite-plugin-compression@0.5.1(vite@4.5.0): resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==} peerDependencies: diff --git a/tsconfig.json b/tsconfig.json index 8668061..dc056d1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,8 @@ "src/**/*.tsx", "src/**/*.vue", "types/*.d.ts", - "vite.config.ts" + "vite.config.ts", + "build/**/*.ts", ], "exclude": [ "node_modules", diff --git a/vite.config.ts b/vite.config.ts index f73bd8f..f8615ef 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,6 +10,7 @@ import mockDevServerPlugin from "vite-plugin-mock-dev-server"; import vueSetupExtend from "vite-plugin-vue-setup-extend"; import viteCompression from "vite-plugin-compression"; import { createHtmlPlugin } from "vite-plugin-html"; +import { enableCDN } from "./build/cdn"; // 当前工作目录路径 const root: string = process.cwd(); @@ -47,7 +48,9 @@ export default defineConfig(({ mode }) => { ENABLE_ERUDA: env.VITE_ENABLE_ERUDA || "false" } } - }) + }), + // 生产环境默认不启用 CDN 加速 + enableCDN(env.VITE_CDN_DEPS) ], resolve: { alias: {