项目优化线上发布的时候，
减少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'
},
],
})
],
)}
