Vite使用CDN外部化减少打包体积

外部化使用的插件是 vite-plugin-cdn-import

基础用法

安装插件：

npm i vite-plugin-cdn-import

在 vite.config.js 中引入：

import importToCDN from 'vite-plugin-cdn-import'

export default {
    plugins: [
      prodUrl: `/cdn/{path}`,
        modules: [
          //    {
          //   name: 'vue',
          //   var: 'Vue',
          //   path: 'https://unpkg.com/vue@3.2.25/dist/vue.global.prod.js'
          // },
          {
            name: 'vue',
            var: 'Vue',
            path: 'vue-dist/vue.global.prod.js'
          },
          {
            name: 'element-plus',
            var: 'ElementPlus',
            path: 'element-plus/index.full.min.js',
            css: 'element-plus/index.css'
        },
          {
            name: 'vue-demi', // vue版本选好 不然会报错
            var: 'VueDemi',
            path: 'vue-demi/lib/index.iife.js'
          },
          {
            name: 'vue-router',
            var: 'VueRouter',
            path: 'vue-router/vue-router.global.prod.js'
          },
          {
            name: 'pinia',
            var: 'Pinia',
            path: 'pinia-dist/pinia.iife.prod.js'
          },
          {
            name:'echarts',
            var:'echarts',
            path: 'echarts-dist/echarts.min.js',
          },
    ],
}

注意，prodUrl 不仅可以定义远程地址，如 https://cdn.jsdelivr.net/npm/{name}@{version}/{path}

还可以指向本项目的地址，我定义的就是本地地址 public/cdn/{path} 。

其中，{path} 分别又指向modules中的各个path 属性。

在生产环境中，/public/cdn/... 可以用 /cdn/... 访问，不需要加public。

原理

插件大概干了两件事

将modules中指定的包外部化，打包过程中并不安装这些包
不安装那怎么引入呢？在 index.html 中，生成被排除包的script引用。

html

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<link href="/cdn/element-plus/index.css" rel="stylesheet">
		<script src="/cdn/vue-dist/vue.global.prod.js"></script>
		<script src="/cdn/element-plus/index.full.min.js"></script>
		<script src="/cdn/vue-demi/lib/index.iife.js"></script>
	
	</head>
</html>

大坑

在指定path时出现了一个大坑。

原本Vue包配的路径是path: 'vue/vue.global.prod.js'，部署到生产环境就访问不到资源了，报404。

研究了一下，发现放js文件为一个单词，也许在读取资源的时候不合法。把路径改为 path: 'vue-dist/vue.global.prod.js'，就没有问题了。

至于为毛不让用单个词的path，还没研究出来。

不使用该插件呢？

vite本身就有一个external属性，来指定需要外部化的包：

  build: {
    rollupOptions: {
      external: ['lodash', 'vue']
    }
  }

然后再在 index.html 文件中手动加入 script 引用文件。

Vite使用CDN外部化减少打包体积 ​

基础用法 ​

原理 ​

大坑 ​

不使用该插件呢？ ​

Vite使用CDN外部化减少打包体积

基础用法

原理

大坑

不使用该插件呢？