vite项目build cdn引入插件vite-plugin-cdn-import-五八三

项目优化线上发布的时候，减少js的体积，是常用的手段，例如vue，vuex，axiox等采取cdn的引入形式，不是把它们打入bundle的形式，虽然可能有增加http请求cdn的次数，但是如果cdn稳定且速度快，这样的弊端是可以忽略的。

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

1. vite-plugin-cdn-import

开发环境使用本地的npm包，cdn是build时候才生效的

通常没有把常用的package单独cdn引入，它们会增加build的大小。比如我们把vue不采取cdn的形式，build的js大小为54.4k

采取cdn引入的形式， build的js大小为2.2k

build的index.html文件如下

其中vue的版本与package.json指定的是相同的

2. 采取分析插件rollup-plugin-visualizer

分别得到如下的效果：

采取cdn插件

未采取cdn插件

可以看到采取cdn引vue的index.js中没有vue相关的打入代码, 未采取cdn的vue相关代码打进了index.js

3. vite.config.js相关代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true
    }),
    importToCDN({
      modules: [
            {
                name: 'vue',
                var: 'Vue',
                path: `umd/react.production.min.js`,
            }
      ],
    })
  ],
})

有一些model该插件还提供了自动完成，我们不需要配置参数了

export default {
    plugins: [
        importToCDN({
            modules: [
                autoComplete('vue'),
            ],
        }),
    ],
}

写法如上，那么有那些是支持自动完成的呢，官方也给出了自动完成支持的 module

“react” | “react-dom” | “react-router-dom” |
“antd” | “ahooks” | “@ant-design/charts” |
“vue” | “vue2” | “@vueuse/shared” |
“@vueuse/core” | “moment” |
“eventemitter3” | “file-saver” |
“browser-md5-file” | "xlsx | “crypto-js” |
“axios” | “lodash” | “localforage”

常见cdn网站,我们主要介绍俩个国外的，也是常用的，

UNPKG：https://unpkg.com
jsDelivr ：https://www.jsdelivr.com

到这里是cdn库自动构建的基本知识，下面看一下配置,特别是prodUrl:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { autoComplete, Plugin as importToCDN } from 'vite-plugin-cdn-import';

export default defineConfig({
  plugins: [vue(),
   importToCDN({
    prodUrl: 'https://unpkg.com/{name}@{version}/{path}',
    modules: [
      autoComplete('vue'),
      autoComplete('axios'),
      {
        name: 'element-plus',
        var: 'ElementPlus', //根据main.js中定义的来
        version: '2.2.17',
        path: 'dist/index.full.js',
        css: 'dist/index.css'
      },
      {
        name: 'vue-demi',
        var: 'VueDemi', //根据main.js中定义的来
        version: '0.13.11',
        path: 'lib/index.iife.js'
      },
      {
        name: '@element-plus/icons-vue',
        var: 'ElementPlusIconsVue', //根据main.js中定义的来
        version: '2.0.9',
        path: 'dist/index.iife.min.js'
      },
      {
        name: 'bootstrap',
        var: 'bootStrap', //根据main.js中定义的来
        version: '5.2.1',
        path: 'dist/js/bootstrap.js',
        css: 'dist/css/bootstrap.min.css'
      },
    ],
  })
],
)}