TypeScript 中 Vite 怎么配置外部 CDN 加速生产包体积-js教程-PHP中文网

typescript 项目中用 vite 配置 cdn 加速的核心是将稳定不变的第三方库（如 vue、vue router）移出打包产物，改由 cdn 提供；需配置 vite-plugin-cdn-import、external、手动注入 script 并补充类型声明。

typescript 中 vite 怎么配置外部 cdn 加速生产包体积

在 TypeScript 项目中用 Vite 配置外部 CDN 加速，核心是把体积大、稳定不变的第三方依赖（如 Vue、React、Lodash、Axios 等）从打包产物中移除，改由 CDN 提供。这样能显著减小 chunk 和 vendor 文件体积，加快首屏加载。

确认哪些库适合走 CDN

优先选择：

版本长期稳定、不频繁更新的全局库（如 vue@3.4.37、vue-router@4.4.5、pinia@2.2.6）
纯运行时无副作用、支持 UMD 或 ESM 全局变量导出的库（例如 CDN 上的 https://unpkg.com/vue@3.4.37/dist/vue.esm-bundler.js 暴露 window.Vue）
被多个页面/模块重复引用的“基础依赖”

不建议 CDN 的：内部工具函数、带副作用的插件、需要 SSR 支持的模块、未提供完整 ESM/UMD 构建的私有包。

安装并配置 vite-plugin-cdn-import

这是目前最轻量、适配 Vite 且对 TypeScript 友好的 CDN 插件。

安装命令：

php版微信js-sdk支付接口类

下载

npm install vite-plugin-cdn-import --save-dev

在 vite.config.ts 中配置：

import { defineConfig } from 'vite'
import { cdn } from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    cdn({
      // 映射 import 路径 → CDN URL，同时声明全局变量名
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://unpkg.com/vue@3.4.37/dist/vue.esm-bundler.js'
        },
        {
          name: 'vue-router',
          var: 'VueRouter',
          path: 'https://unpkg.com/vue-router@4.4.5/dist/vue-router.esm-bundler.js'
        }
      ]
    })
  ],
  build: {
    // 确保这些库不再被打包进 chunk
    rollupOptions: {
      external: ['vue', 'vue-router', 'pinia']
    }
  }
})

补充关键动作

① 在 index.html 中手动注入 CDN script
Vite 不会自动插入 CDN 脚本，需手动添加到 index.html 的或底部（推荐 + defer）：

② 类型声明补全（TS 编译不报错）
在 src/env.d.ts 或任意 .d.ts 文件中添加：

declare const Vue: typeof import('vue')
declare const VueRouter: typeof import('vue-router')

③ 验证是否生效
构建后检查：
- dist/assets/index-*.js 里不再出现 import Vue 或大量 Vue runtime 代码
- 浏览器控制台执行 Vue 和 VueRouter 应返回构造函数
- 使用 rollup-plugin-visualizer 查看依赖图，确认对应模块已消失