我要评论
目录
我的博客原文：https://code-nav.top/article/1071
最近在用vite4+typescript+vue3.2+ssr重构我的博客，由于项目内容较多，所以遇到了一些性能问题，所以在构建生产环境时做了一些优化，在这里做一个记录，方便大家参考。
安装 terser插件
npm install terser -dbuild里添加terseroptions配置
// 打包环境移除console.log，debugger
terseroptions: {
compress: {
drop_console: true,
drop_debugger: true
}
},第一步：客户端打包开启
npm i vite-plugin-compression -d在vite.config.ts中引入
// 引入
import vitecompression from 'vite-plugin-compression'
//在plugins配置数组里添加gzip插件
vitecompression({
verbose: true, // 默认即可
disable: false, // 开启压缩(不禁用)，默认即可
deleteoriginfile: false, // 删除源文件
threshold: 5120, // 压缩前最小文件大小
algorithm: 'gzip', // 压缩算法
ext: '.gz' // 文件类型
})打包出的效果图：
第二步：部署服务端开启
nginx中添加压缩配置
# 开启或者关闭gzip模块(on|off)
gzip on;
# 允许压缩的页面最小字节数, 默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大
gzip_min_length 1k;
# 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。例如 4 4k 代表以4k为单位，按照原始数据大小以4k为单位的4倍申请内存。
gzip_buffers 4 16k;
# 识别http的协议版本。由于早期的一些浏览器或者http客户端，可能不支持gzip自解压，用户就会看到乱码，所以做一些判断还是有必要的。
#gzip_http_version 1.0;
# gzip压缩比，1 压缩比最小处理速度最快，9 压缩比最大但处理最慢（传输快但比较消耗cpu）。
gzip_comp_level 2;
# 匹配mime类型进行压缩，（无论是否指定）"text/html"类型总是会被压缩的。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 和http头有关系，加个vary头，给代理服务器用的
gzip_vary off;
# 表示ie6及以下禁止压缩
gzip_disable "msie [1-6]\.";build中添加如下代码：
build: {
rollupoptions: {
output: {
chunkfilenames: 'static/js/[name]-[hash].js',
entryfilenames: 'static/js/[name]-[hash].js',
assetfilenames: 'static/[ext]/[name]-[hash].[ext]',
}
}
}第一种：提高静态资源的容量大小
build: {
chunksizewarninglimit: 1500,
}第二种：合并路由打包
build里的output设置内,添加以下代码
manualchunks: {
// vue vue-router合并打包
vue: ['vue', 'vue-router'],
lodash: ['lodash'],
// 两个文件合并成一个a文件
helloworld: ['src/components/a.vue','src/components/b.vue'],
}第三种：最小拆分打包
// 插件打包做处理
manualchunks(id) {
if (id.includes('node_modules')) {
return id.tostring().split('node_modules/')[1].split('/')[0].tostring();
}
return;
}rollup plugin visualizer,这是一个依赖分析插件，它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式),你可以选择任意一种你喜欢的观察模式。
npm i rollup-plugin-visualizer在vite.config.ts中引入并配置
// 引入
import { visualizer } from 'rollup-plugin-visualizer';
// 在plugins配置数组里添加
visualizer({
open:true, // 注意这里要设置为true，否则无效，如果存在本地服务端口，将在打包后自动展示
gzipsize:true,
file: "stats.html", //分析图生成的文件名
brotlisize:true
}),将在打包后自动展示，效果图：
npm i unplugin-vue-components -d在vite.config.ts中引入并配置
import components from 'unplugin-vue-components/vite'
// ui库解析器，也可以自定义，需要安装相关ui库，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的时候，需要安装对应的ui库，这里以element为示例
import { elementplusresolver } from 'unplugin-vue-components/resolvers'
export default defineconfig({
plugins: [
components({
dirs: ['src/components'], // 目标文件夹
extensions: ['vue','jsx'], // 文件类型
dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对
// ui库解析器，也可以自定义，需要安装相关ui库
resolvers: [
elementplusresolver(),
],
})
]
})注意：部分同学这个插件下载失败，可以试试以下方案：
npm i vite-plugin-imagemin --ignore-scripts实在无法下载依赖包的，需要的话找博主私发你，可以部署到自己的npm上。
如何部署npm看我另一篇文章：https://code-nav.top/article/1014
安装 vite-plugin-imagemin插件
npm i vite-plugin-imagemin -d在vite.config.js里面配置
// 引入
import viteimagemin from 'vite-plugin-imagemin'
// 在plugins配置数组里添加
plugin: [
viteimagemin({
gifsicle: {
optimizationlevel: 7,
interlaced: false
},
optipng: {
optimizationlevel: 7
},
mozjpeg: {
quality: 20
},
pngquant: {
quality: [0.8, 0.9],
speed: 4
},
svgo: {
plugins: [
{
name: 'removeviewbox'
},
{
name: 'removeemptyattrs',
active: false
}
]
}
})
]内容分发网络（content delivery network，简称 cdn）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。通常我们请求依赖模块使用 cdn ，而请求项目代码依然使用自己的服务器。还是以 lodash 为例：
npm install vite-plugin-cdn-import --save-dev在vite.config.js里面配置
import { autocomplete, plugin as importtocdn } from 'vite-plugin-cdn-import';
export default defineconfig({
plugins: [
importtocdn({
// 需要 cdn 加速的模块
modules: [
// 支持自动导入
autocomplete('axios'),
{
name: 'lodash',
var: '_',
path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
}
]
})
]
})配置完成后，打包自动会在index.html中引入script资源，如下图：
自动导入cdn的功能（autocomplete），有很多常用的依赖不需要自己再找（如vue、reac、antd、axios等），autocomplete功能可以在文档中查找使用。
支持自动完成的模块：
注意：自动完成记得在main.ts中引入模块
在main.ts引入对应模块然后挂载，注意名称要和你cdn加速的name名称相同，不然引不进来，一般不用怎么修改，只有遇到问题后再检查一下自己是不是忘记引入或者引入错误了。
cdn网站查看： https://cdnjs.com/
注意：build打包时候如果遇到报错importtocdn is not a function，这个错误应该和版本有关，将import importtocdn from 'vite-plugin-cdn-import'引入改成import { plugin as importtocdn } from 'vite-plugin-cdn-import'即可
完整的vite.config.ts
import path from 'path';
import { defineconfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuejsx from '@vitejs/plugin-vue-jsx';
import components from 'unplugin-vue-components/vite';
import { elementplusresolver } from 'unplugin-vue-components/resolvers';
import { vitecommonjs } from '@originjs/vite-plugin-commonjs';
import autoimport from 'unplugin-auto-import/vite';
import windicss from 'vite-plugin-windicss';
import vitecompression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer';
import { autocomplete, plugin as importtocdn } from 'vite-plugin-cdn-import';
// 引入
import viteimagemin from 'vite-plugin-imagemin';
import components from 'unplugin-vue-components/vite';
// ui库解析器，也可以自定义，需要安装相关ui库，unplugin-vue-components/resolvers
// 提供了以下集中解析器，使用的时候，需要安装对应的ui库，这里以element为示例
import { elementplusresolver } from 'unplugin-vue-components/resolvers';
const pathsrc = path.resolve(__dirname, 'src');
export default defineconfig({
resolve: {
alias: {
'@/': `${pathsrc}/`
}
},
plugins: [
vuejsx(),
windicss(),
vue(),
visualizer(),
vitecommonjs(),
components({
dirs: ['src/components'], // 目标文件夹
extensions: ['vue', 'jsx'], // 文件类型
dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对
// ui库解析器，也可以自定义，需要安装相关ui库
resolvers: [
elementplusresolver()
]
}),
// 自动导入vue3的hooks
autoimport({
resolvers: [elementplusresolver()],
imports: ['vue', 'vue-router', 'vuex', '@vueuse/core'],
// 生成路径
dts: path.resolve(pathsrc, 'auto-imports.d.ts')
}),
// 自动导入组件
components({
resolvers: [
elementplusresolver({
importstyle: 'sass'
})
],
dts: path.resolve(pathsrc, 'components.d.ts')
}),
vitecompression({
// gzip静态资源压缩配置
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz'
}),
importtocdn({
// 需要 cdn 加速的模块
modules: [
autocomplete('axios'),
{
name: 'lodash',
var: '_',
path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
}
]
}),
viteimagemin({
gifsicle: {
optimizationlevel: 7,
interlaced: false
},
optipng: {
optimizationlevel: 7
},
mozjpeg: {
quality: 20
},
pngquant: {
quality: [0.8, 0.9],
speed: 4
},
svgo: {
plugins: [
{
name: 'removeviewbox'
},
{
name: 'removeemptyattrs',
active: false
}
]
}
})
],
server: {
watch: { usepolling: true },
open: false,
hmr: true,
/* 设置为0.0.0.0则所有的地址均能访问 */
host: '0.0.0.0',
port: 8080,
https: false,
proxy: {
'/api': {
/* 目标代理服务器地址 */
target: 'https://code-nav.top/',
/* 允许跨域 */
changeorigin: true
}
}
},
build: {
outdir: 'jccloudweb',
minify: 'terser',
csscodesplit: true,
chunksizewarninglimit: 1500,
rollupoptions: {
input: 'index.html',
output: {
// 静态资源打包做处理
chunkfilenames: 'assets/js/[name]-[hash].js',
entryfilenames: 'assets/js/[name]-[hash].js',
assetfilenames: 'assets/[ext]/[name]-[hash].[ext]',
manualchunks(id) {
if (id.includes('node_modules')) {
return id.tostring().split('node_modules/')[1].split('/')[0].tostring();
}
}
}
},
terseroptions: {
// 清除console和debugger
compress: {
drop_console: true,
drop_debugger: true
}
}
}
});如果你的项目已经在用 vite ，不妨试验一下以上方案，看看项目会不会变得更加丝滑。欢迎在评论区交流。
如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。
我的线上博客：富朝阳的博客
发表评论