新商家系统优化
商家系统新版本上线也有一段时间了,最近在优化系统的性能和用户体验,特分享一下优化的经验。
构建产物
项目使用的技术栈是vite + vue3 + element-plus + ts + sass + pinia,在项目构建时,会生成dist目录,该目录下包含了项目的静态资源和index.html文件。
当然如果不对dist目录下的文件进行优化,也会影响系统的性能和用户体验。
所以,接下来大概介绍一下构建产物的优化,主要包括以下几个方面:
- 静态资源压缩
- 代码分割
- 资源缓存
这里使用一个vite-plugin-compression插件进行压缩,
import compressPlugin from "vite-plugin-compression";
export const createCompress = (compress: any) => {
if (compress === "brotli") {
return compressPlugin({
ext: ".br",
algorithm: "brotliCompress",
});
}
if (compress === "gzip" || compress) {
return compressPlugin({
filter: /\.(js|mjs|json|css|html)$/i,
ext: ".gz",
algorithm: "gzip",
threshold: 10240,
deleteOriginFile: false,
});
}
return [];
};缓存以及代码分包
// vite.config.ts
export default defineConfig({
build: {
chunkSizeWarningLimit: 10240,
cssCodeSplit: true,
reportCompressedSize: true,
rollupOptions: {
treeshake: true,
cache: true,
output: {
chunkFileNames: outputHash
? "static/js/[name]-[hash].js"
: "static/js/[name].js",
entryFileNames: outputHash
? "static/js/[name]-[hash].js"
: "static/js/[name].js",
assetFileNames: outputHash
? "static/[ext]/[name]-[hash].[ext]"
: "static/[ext]/[name].[ext]",
manualChunks: {
vue: ["vue", "vue-router", "pinia", "axios"],
player: ["xgplayer", "xgplayer-hls.js"],
utils: ["@vueuse/core", "@vueuse/head"],
// ....
},
minify: true,
sourcemap: false,
...(minify === "terser"
? {
terserOptions: {
compress: prod
? {
defaults: true,
drop_console: true,
drop_debugger: true,
pure_funcs: ["console.log", "console.warn"], // 可选:删除指定函数
}
: false,
mangle: prod,
format: {
comments: !prod,
beautify: prod,
},
},
}
: {}),
},
},
},
});图片压缩,不压缩的话,会导致图片体积过大,影响系统的性能和用户体验, 压缩完成之后可以将图片上传到cdn, 这样图片就不会打包到dist目录了。当然小图片不需要上传的。
大致优化的内容:
- 项目构建时间缩短提升,linux 平台构建时间大概在 40s 左右,直到部署完成将近 1 分钟左右。 mac 平台缩短至 20s
- 首屏加载时间提升,实现页面秒开加载
- 大文件进行拆分,3M 文件拆分为 700k, 开启文件压缩
- 优化版本发布之后长时间等待刷新问题
- 语法兼容,es6+平台兼容
- 删除项目冗余文件,优化部分臃肿代码逻辑
- 构建完成之后,构建的文件顶部不需要显示
build: Vue xxxx - 修复外部链接 跨域,打不开,报错问题
- 修复控制台:报错,警告问题,实现 0warning, 0erros
- 渐进式图片加载,实现图片的懒加载,优化首屏加载时间
- 还有一些特定的
ui调整
