一、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;
3. 打包后效果
1、可通过注释 utils
下创建 build.ts
文件内容,实现部分 cdn,而不是全部。
2、貌似实现不了 cdn
的按需引入,如下图 index.html
中全引入了 cnd 链接
。
3、npm
安装依赖 与 cnpm
安装依赖时,build.rollupOptions.output.manualChunks
分包效果会不一致,下图的为 npm
安装依赖时的打包效果。