CDN 优化前端打包体积
最近遇到一个需求，项目快截止了，由于项目太大，而且引入了非常多的库，导致发版速度很慢，而且由于打包时占用内存太大，更可能会导致jenkins的服务器崩溃，于是学到了使用cdn来CDN 优化前端打包体积
前端项目中打包体积过大、首次加载缓慢是常见的性能瓶颈之一。借助 CDN（内容分发网络）将第三方库从打包中剥离出去，是一种简单高效的优化手段。下面将介绍如何通过 CDN 优化打包体积，提高页面加载速度，并结合实际配置举例说明。
一.为什么要用 CDN？
减小打包体积：将像
react、vue、lodash、axios等第三方依赖剥离，不再打进 bundle 中。提升首屏加载速度：CDN 的边缘节点更接近用户，静态资源加载更快。
缓存复用：公共库通过 CDN 引入，可被多个站点共享缓存，提升命中率。
什么是bundle?
bundle（打包文件） 是指前端项目构建后生成的 一个或多个包含 HTML、CSS、JavaScript 的压缩合并文件，它们是浏览器加载运行网站所需的最终资源。
更具体地说：
在开发时，我们写了很多模块化的 JS 文件（如 React 组件、Vue 页面、ESM 模块），这些文件可能：
使用了模块语法（如
import/export）引入了第三方库（如
axios、lodash）包含了动态资源（如图片、字体）
但是浏览器不原生支持这些开发格式。于是我们用 打包工具（如 Webpack、Vite、Rollup）将这些源文件：
✅ 转换为浏览器能识别的格式
✅ 合并为一个或多个文件
✅ 压缩体积以优化加载速度
这个输出结果就叫做 bundle。
示例
开发时代码结构可能是这样的：
src/├─ App.vue├─ main.js└─ components/└─ Navbar.vue
打包后可能生成：
dist/├─ index.html├─ bundle.js ← 就是这个：所有 JS 和模板合并压缩后的文件└─ style.css
总结一句话：
bundle 是前端构建工具将源代码和依赖打包压缩后生成的、供浏览器使用的最终资源文件。
二.配置vite.config.ts使用cdn加速
方式一:全自动
1.安装插件
npm install vite-plugin-cdn-import --save-dev
2. 配置 vite.config.ts
// vite.config.ts
import { defineConfig } from 'vite'
import importToCDN from 'vite-plugin-cdn-import'export default defineConfig({plugins: [importToCDN({modules: [{name: 'vue',var: 'Vue',path: 'https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js'},{name: 'axios',var: 'axios',path: 'https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js'}]})],build: {rollupOptions: {external: ['vue', 'axios'] // 不打包这些依赖}}
})
3. 项目中照常使用：
import { createApp } from 'vue'
import axios from 'axios'
// 不用担心，虽然写了 import，但实际引用的是 CDN 版本
方法二：手动方式
1. 配置 rollupOptions.external
// vite.config.ts
export default defineConfig({build: {rollupOptions: {external: ['vue']}}
})
2. 修改 index.html，引入 CDN：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"></script>
注意：手动方式你需要确保 <script> 标签在 HTML 中写对，并且 CDN 加载顺序正确。
还有一个重要的点，就是虽然我们使用cdn,但是我们也不需要删除本地的依赖，而且使用import来引入使用第三方库时，也不用担心线上环境对库的使用
也就是说，使用cdn,本地开发依然使用本地依赖，线上环境使用cdn上的依赖
还有一个问题，如果我在本地使用import 引入使用库，但是本地依赖包没有打包上去，线上cdn使用库时也是import这个用法吗？
详细解释：
你在本地写的：
import { createApp } from 'vue'这是 模块化语法，Vite 会在打包阶段处理这个 import。
🛠 如果配置了 external: ['vue']
意味着：
打包的时候 Vite 会认为
vue是“外部依赖”所以不会把
vue打进 bundle 中同时会把这个
import替换成对全局变量Vue的引用
比如你写的：
import { createApp } from 'vue'Vite 会打包成：
const { createApp } = Vue;👉 所以浏览器运行这段代码时，它不会再去 import，而是直接使用了 CDN 提供的全局变量 Vue
external的名字怎么填？
你
import xxx from '模块名'
👉 那你在external中就填'模块名'
常见库 external 对照表
| 你写的 import | external 配置 | 全局变量（CDN 上暴露） |
|---|---|---|
import Vue from 'vue' | 'vue' | Vue |
import React from 'react' | 'react' | React |
import ReactDOM from 'react-dom' | 'react-dom' | ReactDOM |
import axios from 'axios' | 'axios' | axios |
import dayjs from 'dayjs' | 'dayjs' | dayjs |
import _ from 'lodash' | 'lodash' | _ |
import * as echarts from 'echarts' | 'echarts' | echarts |
⚠️ 注意事项
版本一致性：确保本地开发依赖和 CDN 引入的版本一致。
CDN 可用性保障：推荐使用稳定的 CDN，如 jsDelivr、UNPKG、CDNJS。
要确保 CDN
<script>标签在你主 JS 文件之前加载
index.html:
<!-- 引入 Vue 的 CDN，暴露 window.Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"></script><!-- 再加载你的打包代码 -->
<script type="module" src="/assets/index.js"></script>