新商家系统优化
商家系统新版本上线也有一段时间了,最近在优化系统的性能和用户体验,特分享一下优化的经验。
构建产物
项目使用的技术栈是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调整 
