feat: 添加打包是否启动`cdn`替换本地库配置，默认`false`不启动

2 years ago · 49cdcf216f
9 changed files with 126 additions and 4 deletions
--- a/.env.production
+++ b/.env.production
@ -8,4 +8,7 @@ VITE_ROUTER_HISTORY = "hash"
 VITE_PROXY_DOMAIN_REAL = ""

 # 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
-VITE_LEGACY = false
+VITE_LEGACY = false
+
+# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
+VITE_CDN = false
--- 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
--- a/build/cdn.ts
+++ 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"
+    }
+  ]
+});
--- 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)) {
--- 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"] }),
--- 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",
--- 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:
      {
--- 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 {
--- 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"]