【vite 4.3 + vue 3.2 项目优化实战】配置 CDN 服务

0130

【vite 4.3 + vue 3.2 项目优化实战】配置 CDN 服务

记录一次 vite 打包体积优化过程，踩了一些坑，分享一下。

参考了这篇文章： Vite 中使用 cdn 来加载需要的库文件-前端/后端-繁花云

本篇将使用两种方式进行 CDN 加速优化项目

  1. 使用 vite-plugin-cdn-import 插件
  2. 使用 rollup 自带的 external、output.globals

一. 使用 vite 创建项目

Vite 中文文档

创建项目

pnpm create vite

项目目录结构

image.png

安装

  • 下载之后进入项目
  cd cdn-demo
  • 安装依赖
pnpm i

运行

pnpm dev

打开 http://localhost:5173, 可以看到默认的页面

image.png

安装 arco-design

# npm
npm install --save-dev @arco-design/web-vue
# yarn
yarn add --dev @arco-design/web-vue

完整引入

注意不能按需引入 arco-design、直接在 main.ts 中使用全局引入的方式，打包后会自动按照 cdn 引入

  • 修改main.js文件
import { createApp } from 'vue'

import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';


const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

使用 arco-design

  • 修改App.vue文件
<template>
  <a-space direction="vertical">
    <a-space>
      <a-button type="primary" status="success">Primary</a-button>
      <a-button status="success">Default</a-button>
      <a-button type="dashed" status="success">Dashed</a-button>
      <a-button type="outline" status="success">Outline</a-button>
      <a-button type="text" status="success">Text</a-button>
    </a-space>
    <a-space>
      <a-button type="primary" status="warning">Primary</a-button>
      <a-button status="warning">Default</a-button>
      <a-button type="dashed" status="warning">Dashed</a-button>
      <a-button type="outline" status="warning">Outline</a-button>
      <a-button type="text" status="warning">Text</a-button>
    </a-space>
    <a-space>
      <a-button type="primary" status="danger">Primary</a-button>
      <a-button status="danger">Default</a-button>
      <a-button type="dashed" status="danger">Dashed</a-button>
      <a-button type="outline" status="danger">Outline</a-button>
      <a-button type="text" status="danger">Text</a-button>
    </a-space>
  </a-space>
</template>

然后可以看到页面
image.png

二. 分析依赖

这里可以安装 rollup-plugin-visualizer 插件分析依赖视图

安装 rollup-plugin-visualizer

rollup-plugin-visualizer 文档

pnpm add rollup-plugin-visualizer -D

使用 rollup-plugin-visualizer

  • 修改 vite.config.ts
import { defineConfig } from 'vite'




import vue from '@vitejs/plugin-vue'







import { visualizer } from 'rollup-plugin-visualizer'





// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), visualizer({ open: true })],
})

打包项目

pnpm build

打包完成后，会自动打开页面：

image.png

vite 也会输出：

image.png

分析上图，我们发现整个项目依赖为 1.79MB，其中 vue 体积占比 13.57%，248.43KB 大小，其次是@arco-design+web-vue 占比 81.49%, 1.46MB。

三. CDN 加速

1. 安装 vite-plugin-cdn-import(推荐)

vite-plugin-cdn-import 文档

pnpm add vite-plugin-cdn-import -D
1.1. 配置需要加速的依赖
  • 修改 vite.config.ts
import { defineConfig } from 'vite'




import vue from '@vitejs/plugin-vue'







import { visualizer } from 'rollup-plugin-visualizer'



// 文档的用法会报错, 要这样引入才可以


import { Plugin as importToCDN } from 'vite-plugin-cdn-import'



// https://vitejs.dev/config/


export default defineConfig({


  plugins: [


    vue(),


    visualizer({ open: true }),


    importToCDN({

      modules: [

        {
          // 引入时的包名
          name: '@arco-design/web-vue',
          // app.use(), 全局注册时分配给模块的变量
          var: 'ArcoVue',
          // 根据自己的版本号找到对应的CDN网址
          path: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco-vue.min.js',
          // 根据自己的版本号找到对应的CDN网址
          css: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco.css',
        },
      ],
    }),
  ],
})
CDN 参数获取方式

  • name：npm 包的名称

  • var：组件（main.ts）引用的名称
    比如 ArcoVue

    import ArcoVue from '@arco-design/web-vue'
const app = createApp(App)
app.use(ArcoVue)

  • path：cdn 网站存储对应的 js 地址
    输入对应名称，会自动跳转到对应的 js 文件，复制粘贴，需要修改版本，和自己项目的 package.json 版本一致

    bd1416d6606b4d17b5e8b6d741ca5903.gif

    允许只写到版本，后面会自动补齐

  • css：对应位置，参考上图 element-plus
    需要注意的是，css 可以使用本地的，使用本地的就不要添加 css，使用远程 cdn 的就需要在打包前注释本地的，否则会出现样式重叠。

    ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f460d5c02daa4a9bbd3c6a52ccb89f62~tplv-k3u1fbpfcp-watermark.image?)

  • 修改 main.ts

import { createApp } from 'vue'

import './style.css'
import App from './App.vue'


import ArcoVue from '@arco-design/web-vue'
// 这里 css 也用 CDN 导入
// import '@arco-design/web-vue/dist/arco.css'


const app = createApp(App)
app.use(ArcoVue)
app.mount('#app')
1.2. 重新打包
pnpm build

可以看到，原先的 arco-design 依赖包和消失了：

image.png

这时我们本地预览构建产物

pnpm preview

可以看到页面报错了：

image.png

原因是在 element-plus 这个源码中使用了 vue 依赖包里的 ref 变量

1.3. 处理报错
  • 我们将 vue 也引入进来，可以使用 vite-plugin-cdn-import 的 autoComplete 自动导入
import { defineConfig } from 'vite'




import vue from '@vitejs/plugin-vue'







import { visualizer } from 'rollup-plugin-visualizer'



// 文档的用法会报错, 要这样引入才可以


import { Plugin as importToCDN, autoComplete } from 'vite-plugin-cdn-import'



// https://vitejs.dev/config/


export default defineConfig({


  plugins: [


    vue(),


    visualizer({ open: true }),


    importToCDN({

      modules: [

        autoComplete('vue'), // vue2 使用 autoComplete('vue2')
        {
          // 引入时的包名
          name: '@arco-design/web-vue',
          // app.use(), 全局注册时分配给模块的变量
          var: 'ArcoVue',
          // 根据自己的版本号找到对应的CDN网址
          path: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco-vue.min.js',
          // 根据自己的版本号找到对应的CDN网址
          css: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco.css',
        },
      ],
    }),
  ],

})

重新打包 pnpm build

  • 可以发现 vue 依赖包也被排除了

image.png

预览构建产物 pnpm preview

  • 跟完整引入的效果一样
    image.png

2. 使用 rollup 自带的 external、output.globals

Rollup 文档

  • 修改 vite.config.ts
import { defineConfig } from 'vite'




import vue from '@vitejs/plugin-vue'







import { visualizer } from 'rollup-plugin-visualizer'



// 文档的用法会报错, 要这样引入才可以


// import { Plugin as importToCDN, autoComplete } from 'vite-plugin-cdn-import'



// https://vitejs.dev/config/


export default defineConfig({


  plugins: [


    vue(),


    visualizer({ open: true }),


    // importToCDN({
    //   modules: [
    //     autoComplete('vue'), // vue2 使用 autoComplete('vue2')
    //     {
    //       // 引入时的包名
    //       name: '@arco-design/web-vue',
    //       // app.use(), 全局注册时分配给模块的变量
    //       var: 'ArcoVue',
    //       // 根据自己的版本号找到对应的CDN网址
    //       path: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco-vue.min.js',
    //       // 根据自己的版本号找到对应的CDN网址
    //       css: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco.css',
    //     },
    //   ],
    // }),
  ],

  build: {
    rollupOptions: {
      external: ['vue', '@arco-design/web-vue'],
    },
  },
})

external 该选项用于匹配需要保留在 bundle 外部的模块,具体可以查看 官方文档

  • 修改 index.html, 手动引入下 CDN

    需要注意的是：这个 index.html 不是打包后的，是项目的入口 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <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" />
    <!-- 手动引入 vue、arco-design、arco.css -->
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
    <script src="https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco-vue.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco.css"
    />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

重新打包后预览，会出现报错：

image.png

具体可以参考这篇文章： Vite 中使用 cdn 来加载需要的库文件-前端/后端-繁花云

2.1. 使用 rollup-plugin-external-globals 插件来解决问题
安装插件

插件地址：rollup-plugin-external-globals

pnpm add rollup-plugin-external-globals -D
使用插件
  • 修改 vite.config.ts
import { defineConfig } from 'vite'





import vue from '@vitejs/plugin-vue'


import { visualizer } from 'rollup-plugin-visualizer'
// 文档的用法会报错, 要这样引入才可以
// import { Plugin as importToCDN, autoComplete } from 'vite-plugin-cdn-import'


import externalGlobals from 'rollup-plugin-external-globals'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
    // importToCDN({
    //   modules: [
    //     autoComplete('vue'), // vue2 使用 autoComplete('vue2')
    //     {
    //       // 引入时的包名
    //       name: '@arco-design/web-vue',
    //       // app.use(), 全局注册时分配给模块的变量
    //       var: 'ArcoVue',
    //       // 根据自己的版本号找到对应的CDN网址
    //       path: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco-vue.min.js',
    //       // 根据自己的版本号找到对应的CDN网址
    //       css: 'https://unpkg.com/@arco-design/web-vue@2.47.1/dist/arco.css',
    //     },
    //   ],
    // }),
  ],
  build: {
    rollupOptions: {
      external: ['vue', '@arco-design/web-vue'],
      plugins: [
        externalGlobals({
          vue: 'Vue',
          '@arco-design/web-vue': 'ArcoVue',
        }) as any,
      ],
    },
  },
})
2.2. 编译测试
pnpm build


pnpm preview
  • 打开网页发现原先报错已经不存在，问题解决。
    image.png

四. 注意

使用 CDN 未必会加快速度，只能减小打包体积，因为对应 js 和 css 需要从远程地址读取

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
前端
# Vite
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYg7pEpq' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
ios 微信浏览器视频自动播放问题解决方法【亲测有效】-五八三
ios 微信浏览器视频自动播放问题解决方法【亲测有效】
ios 微信浏览器视频自动播放问题解决方法【亲测有效】
2年前 311
高德地图「海量点标记 + 海量标注」卡顿问题 解决方案-五八三
高德地图「海量点标记 + 海量标注」卡顿问题 解决方案
高德地图「海量点标记 + 海量标注」卡顿问题 解决方案
2年前 219
解决微信小程序中，页面中多个视频只播放一个视频的方法-五八三
解决微信小程序中，页面中多个视频只播放一个视频的方法
解决微信小程序中，页面中多个视频只播放一个视频的方法
2年前 123
Vite + Qiankun + Module Federation，微前端项目升级?-五八三
Vite + Qiankun + Module Federation，微前端项目升级?
Vite + Qiankun + Module Federation，微前端项目升级?
2年前 104
cesium使用天地图，此级别下无地图影像，天地图不显示等问题-五八三
cesium使用天地图，此级别下无地图影像，天地图不显示等问题
cesium使用天地图，此级别下无地图影像，天地图不显示等问题
2年前 93
吴恩达与 ChatGPT 提示工程教程学习笔记-五八三
吴恩达与 ChatGPT 提示工程教程学习笔记
吴恩达与 ChatGPT 提示工程教程学习笔记
2年前 90
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐