vue3Vite项目怎么使用cdn 减少包大小

使用 cdn 来减少包体积的情况很常见能用就用吧

本文使用的是 vite 打包 并不是 webpack 注意下

vite 基于 rollup 几乎所有的 rollup 插件都可以使用

使用到的插件
  • rollup-plugin-commonjs
  • rollup-plugin-external-globals

使用 npm install 或者 yarn add 安装即可

配置 vite.config.js

  • 加一项配置
  • 这里的 external 里的 vue 要和 import { createApp } from ‘vue’ 这个包名一致
  • externalGlobals 里配置的 vue: “Vue” 这个大写的是 vue 导出的变量名 你可以到源码包里查看即可
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    import commonjs from "rollup-plugin-commonjs";
    import externalGlobals from "rollup-plugin-external-globals";
     build: {
        rollupOptions: {
          external: ["vue"],
          plugins: [
            commonjs(),
            externalGlobals({
              vue: "Vue",
            }),
          ],
        },
      },

配置 根目录 index.html

1
2
// head 部分添加
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.20/dist/vue.global.min.js"></script>

yarn dev 这时候项目 运行使用的是 本地包
yarn build 这时候会发现打包后的包 并没有把 vue 打包进去 包就 0.几k
yarn serve 这时候 到 f12 NetWork 里面查看 会发现已经 cdn 加载 vue 包了

到这里基本就结束了 下面放下完整配置 以及常用包名称
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// vite.config.js


import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
// import styleImport from "vite-plugin-style-import";
import commonjs from "rollup-plugin-commonjs";
import externalGlobals from "rollup-plugin-external-globals";
const { resolve } = require("path");
// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  root: "./",
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src/"),
    },
  },
  build: {
    rollupOptions: {
      external: ["vue", '@arco-design/web-vue', '@arco-design/web-vue/es/icon', 'axios', 'vue-router','vuex','dayjs'],
      plugins: [
        commonjs(),
        externalGlobals({
          vue: "Vue",
          vuex: "Vuex",
          axios: "axios",
          dayjs: "dayjs",
          "vue-router": "VueRouter",
          "@arco-design/web-vue": 'ArcoVue',
          "@arco-design/web-vue/es/icon": 'ArcoVueIcon',
        }),
      ],
    },
  },
  plugins: [
    vue(),
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),

    // styleImport({
    //   libs: [
    //     {
    //       libraryName: "element-plus",
    //       esModule: true,
    //       resolveStyle: (name) => {
    //         return `element-plus/lib/theme-chalk/${name}.css`;
    //       },
    //       resolveComponent: (name) => {
    //         return `element-plus/lib/${name}`;
    //       },
    //     },
    //   ],
    // }),
  ],
});

// index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.20/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/@arco-design/web-vue@2.0.2/dist/arco-vue.min.js"></script>
    <script src="https://unpkg.com/@arco-design/web-vue@2.0.2/dist/arco-vue-icon.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@4.0.12/dist/vue-router.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@arco-design/web-vue@2.0.2/dist/arco.min.css">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>