[vue-next-admin] vue3 + vite 打包 gzip 压缩、cdn 加速

lyt-top

已于 2023-03-27 14:45:39 修改

阅读量2.1k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-03-25 15:29:42 首次发布

本文链接：https://blog.csdn.net/qq_34450741/article/details/129766676

版权

一、gzip 压缩

1. 安装

使用 vite-plugin-compression 插件

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

2. 使用

vite.config.ts 中

import viteCompression from 'vite-plugin-compression';

plugins: [
	viteCompression()
]

二、cdn 加速

网络卡，打包后第一次进入还是慢，这里只做部分参考，需要的可自行添加配置

1. 插件安装

vite-plugin-cdn-import

npm i vite-plugin-cdn-import -D

vue-demi （`必须安装`）

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

2、插件 import AutoImport from 'unplugin-auto-import/vite' 会与 import importToCDN from 'vite-plugin-cdn-import' 插件冲突，也就是 element-plus 自动导入不能使用。二选一，目前没找到解决办法，vue-next-admin-template-js 去掉了 import AutoImport from 'unplugin-auto-import/vite 插件。相关 vite-plugin-cdn-import issues

npm install vue-demi --sav

2. 使用

`utils` 下创建 `build.ts` 文件，文件内容如下。

参数说明：（path 完整链接为：查看 vite-plugin-cdn-import 插件的 prodUrl）

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

`需要注意下面` importToCDN modules 中的 `css 链接` ，添加的话，`需要把对应的 css 引入删除` ，如删掉 element plus 的 css 引入 `（@import 'element-plus/dist/index.css）`。防止打包时，还把 css 打包进去

import importToCDN, { autoComplete } from 'vite-plugin-cdn-import';

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

创建好 `build.ts` 后，在 `vite.config.ts` 中

以下内容为插件主要配置，已忽略其它 vite 配置

// 引入
import { buildConfig } from './src/utils/build';

const viteConfig = defineConfig((mode: ConfigEnv) => {
	// 添加 buildConfig.cdn()
	plugins: [buildConfig.cdn()],
	optimizeDeps: {
		// 在预构建中强制排除的依赖项
		exclude: ['vue-demi'],
	},
	build: {
		rollupOptions: {
			// 打包时，过滤包导入
			external: buildConfig.external
		}
	}
})

export default viteConfig;