[vuenextadmin]vue3+vite打包gzip压缩、cdn加速

1. 安装

使用 vite-plugin-compression 插件

npm install vite-plugin-compression --save-dev


2. 使用

vite.config.ts 中

import viteCompression from &＃39;vite-plugin-compression&＃39;;plugins: [viteCompression()
]

二、cdn 加速

网络卡&＃xff0c;打包后第一次进入还是慢&＃xff0c;暂未使用到项目 vue-next-admin 中。这里只做参考&＃xff0c;需要的可自行添加

1. 插件安装

vite-plugin-cdn-import

npm i vite-plugin-cdn-import -D


vue-demi &＃xff08;必须安装&＃xff09;

否则报 Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

npm install vue-demi --sav


2. 使用

utils 下创建 build.ts 文件&＃xff0c;文件内容如下。

参数说明&＃xff1a;&＃xff08;path 完整链接为&＃xff1a;查看 vite-plugin-cdn-import 插件的 prodUrl&＃xff09;

• name: 依赖包的名称
• var: 包暴露的全局变量名
• path: cdn 链接地址&＃xff0c;可通过网站 https://www.jsdelivr.com/ 去查询

需要注意下面 importToCDN modules 中的 css 链接 &＃xff0c;添加的话&＃xff0c;需要把对应的 css 引入删除 &＃xff0c;如 删掉 element plus 的 css 引入 &＃xff08;&＃64;import &＃39;element-plus/dist/index.css&＃xff09;。防止打包时&＃xff0c;还把 css 打包进去

import importToCDN, { autoComplete } from &＃39;vite-plugin-cdn-import&＃39;;/*** 打包相关* &＃64;description importToCDN https://github.com/mmf-fe/vite-plugin-cdn-import* &＃64;description cdn 在线引入的 cdn 地址配置。path&＃xff1a;https://www.jsdelivr.com/* &＃64;description external 打包时&＃xff0c;过滤包导入。参考&＃xff1a;https://rollupjs.org/configuration-options/#external*/
export const buildConfig &＃61; {cdn() {return importToCDN({modules: [autoComplete(&＃39;vue&＃39;),autoComplete(&＃39;axios&＃39;),{name: &＃39;vue-demi&＃39;,var: &＃39;VueDemi&＃39;,path: &＃39;lib/index.iife.min.js&＃39;,},{name: &＃39;vue-router&＃39;,var: &＃39;VueRouter&＃39;,path: &＃39;dist/vue-router.global.min.js&＃39;,},{name: &＃39;element-plus&＃39;,var: &＃39;ElementPlus&＃39;,path: &＃39;dist/index.full.min.js&＃39;,css: &＃39;dist/index.min.css&＃39;,},{name: &＃39;&＃64;element-plus/icons-vue&＃39;,var: &＃39;ElementPlusIconsVue&＃39;,path: &＃39;dist/index.iife.min.js&＃39;,},{name: &＃39;echarts&＃39;,var: &＃39;echarts&＃39;,path: &＃39;dist/echarts.min.js&＃39;,},{name: &＃39;echarts-gl&＃39;,var: &＃39;echarts-gl&＃39;,path: &＃39;dist/echarts-gl.min.js&＃39;,},{name: &＃39;echarts-wordcloud&＃39;,var: &＃39;echarts-wordcloud&＃39;,path: &＃39;dist/echarts-wordcloud.min.js&＃39;,},{name: &＃39;vue-i18n&＃39;,var: &＃39;VueI18n&＃39;,path: &＃39;dist/vue-i18n.global.min.js&＃39;,},{name: &＃39;jsplumb&＃39;,var: &＃39;jsPlumb&＃39;,path: &＃39;dist/js/jsplumb.min.js&＃39;,css: &＃39;css/jsplumbtoolkit-defaults.min.css&＃39;,},{name: &＃39;cropperjs&＃39;,var: &＃39;Cropper&＃39;,path: &＃39;dist/cropper.min.js&＃39;,css: &＃39;dist/cropper.min.css&＃39;,},{name: &＃39;sortablejs&＃39;,var: &＃39;Sortable&＃39;,path: &＃39;Sortable.min.js&＃39;,},{name: &＃39;qrcodejs2-fixes&＃39;,var: &＃39;QRCode&＃39;,path: &＃39;qrcode.min.js&＃39;,},{name: &＃39;print-js&＃39;,var: &＃39;printJS&＃39;,path: &＃39;dist/print.min.js&＃39;,css: &＃39;dist/print.min.css&＃39;,},{name: &＃39;&＃64;wangeditor/editor&＃39;,var: &＃39;wangEditor&＃39;,path: &＃39;dist/index.min.js&＃39;,css: &＃39;dist/css/style.min.css&＃39;,},{name: &＃39;&＃64;wangeditor/editor-for-vue&＃39;,var: &＃39;WangEditorForVue&＃39;,path: &＃39;dist/index.min.js&＃39;,},{name: &＃39;vue-grid-layout&＃39;,var: &＃39;VueGridLayout&＃39;,path: &＃39;https://cdn.jsdelivr.net/npm/vue-grid-layout&＃64;3.0.0-beta1/dist/vue-grid-layout.umd.min.js&＃39;,},],});},external: [&＃39;vue&＃39;,&＃39;axios&＃39;,&＃39;vue-router&＃39;,&＃39;element-plus&＃39;,&＃39;&＃64;element-plus/icons-vue&＃39;,&＃39;echarts&＃39;,&＃39;echarts-gl&＃39;,&＃39;echarts-wordcloud&＃39;,&＃39;vue-i18n&＃39;,&＃39;jsplumb&＃39;,&＃39;cropperjs&＃39;,&＃39;sortablejs&＃39;,&＃39;qrcodejs2-fixes&＃39;,&＃39;print-js&＃39;,&＃39;&＃64;wangeditor/editor&＃39;,&＃39;&＃64;wangeditor/editor-for-vue&＃39;,&＃39;vue-grid-layout&＃39;,],
};

创建好 build.ts 后&＃xff0c;在 vite.config.ts 中

以下内容为插件主要配置&＃xff0c;已忽略其它 vite 配置

// 引入
import { buildConfig } from &＃39;./src/utils/build&＃39;;const viteConfig &＃61; defineConfig((mode: ConfigEnv) &＃61;> {// 添加 buildConfig.cdn()plugins: [buildConfig.cdn()],optimizeDeps: {// 在预构建中强制排除的依赖项exclude: [&＃39;vue-demi&＃39;],},build: {rollupOptions: {// 打包时&＃xff0c;过滤包导入external: buildConfig.external}}
})export default viteConfig;


3. 打包后效果

可通过注释 utils 下创建 build.ts 文件内容&＃xff0c;实现部分 cdn&＃xff0c;而不是全部。

貌似实现不了 cdn 的按需引入&＃xff0c;如下图 index.html 中全引入了 cnd 链接。