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

一、gzip 压缩

1. 安装

使用 vite-plugin-compression 插件

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

2. 使用

vite.config.ts 中

import viteCompression from 'vite-plugin-compression';

plugins: [
	viteCompression()
]
1
2
3
4
5

二、cdn 加速

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

1. 插件安装

vite-plugin-cdn-import

npm i vite-plugin-cdn-import -D
1

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
1

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',
	],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

创建好 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 打包后效果

1、可通过注释 utils 下创建 build.ts 文件内容，实现部分 cdn，而不是全部。

2、貌似实现不了 cdn 的按需引入，如下图 index.html 中全引入了 cnd 链接。

3、npm 安装依赖 与 cnpm 安装依赖时，build.rollupOptions.output.manualChunks 分包效果会不一致，下图的为 npm 安装依赖时的打包效果。