vue优化二：cdn加载

最新推荐文章于 2025-03-14 10:03:32 发布

原创最新推荐文章于 2025-03-14 10:03:32 发布 · 794 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript #性能优化

该文章已生成可运行项目，

前言

在上一篇文章中我们使用gzip压缩实现项目的优化vue项目优化点：开启gzip压缩，这篇文章主要是使用cdn加载资源优化项目；
cdn加载项目只是减少的项目的打包体积，其余资源需要从网络资源中获取，那么就需要DNS域名解析，解析是相对来说比较耗时间的，按实际情况是否需要使用这种方式

一、创建项目

先搭建一个vue项目，这个案例使用vite+vue3+element-plus搭建，webpack请自行查找

二、使用步骤

首先我们先全量引入element-plus，然后不做任何处理，打包文件看一下文件大小

// main.ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");

vite.config.ts文件内容

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";
//visualizer 打包产物资源分析
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
    
  ],
  
});

在这里插入图片描述
顺便看一下资源图，发现element-plus高达1.1MB

2.将element-plus和vue不打包进入

2.1 安装rollup-plugin-external-globals

pnpm add rollup-plugin-external-globals --save-dev

修改vite.config.ts文件内容，同时将main.ts中的element-plus的css引入注释掉，css通过cdn引入

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import { visualizer } from "rollup-plugin-visualizer";

import externalGlobals from "rollup-plugin-external-globals";
import { initCdn } from "./preloadCdn";
export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
    initCdn([
      {
        tag: "link",
        src: "https://cdn.jsdelivr.net/npm/element-plus/dist/index.css",
      },
      {
        tag: "script",
        src: "https://unpkg.com/vue@3.5.13/dist/vue.global.js",
      },
      {
        tag: "script",
        src: "https://cdn.jsdelivr.net/npm/element-plus",
      },
    ]),
  ],
  build: {
    rollupOptions: {
      external: ["vue", "element-plus"],
      plugins: [
        externalGlobals({
          vue: "Vue",
          "element-plus": "ElementPlus",
        }) as any,
      ],
    },
  },
});

preloadCdn文件内容作用：打包之后将vue和element-plus和css通过cdn引入

import type { Plugin } from "vite";
interface optionsItem {
  tag: string;
  src: string;
}
type Options = optionsItem[];
function initCdn(options: Options): Plugin {
  return {
    name: "vite-plugin-vue-cdn",

    transformIndexHtml() {
      const arr = options.map((item) => {
        if (item.tag == "link") {
          return {
            tag: "link",
            attrs: {
              rel: "stylesheet",
              href: item.src,
            },
          };
        } else {
          return {
            tag: "script",
            attrs: {
              src: item.src,
            },
          };
        }
      });
      return arr;
    },
  };
}
export { initCdn };

当然引入也可以在index.html手动引入

<!doctype html>
<html lang="en">

<head>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue + TS</title>
<script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>