Vue 项目优化汇总

优化类型	优化手段	描述	Webpack	Vite
首屏页面加载优化	路由懒加载 (Lazy Loading)	将路由组件分割成不同的代码块，按需加载，减少初始加载时间。	✅	✅
	组件按需引入	对于第三方组件库，只引入需要的组件，避免全量引入。	✅	✅
	图片懒加载	使用 `v-lazy` 或其他懒加载库，对图片进行按需加载。	✅	✅
	骨架屏 (Skeleton Screen)	在数据加载前显示占位内容，提升用户体验。	✅	✅
	静态资源 CDN 加速	将静态资源（如 JS、CSS、图片）托管到 CDN，提升加载速度。	✅	✅
	开启 Gzip/Brotli 压缩	对静态资源进行压缩，减少传输体积。	✅	✅
	使用 HTTP/2	利用 HTTP/2 的多路复用特性，提升资源加载效率。	✅	✅
	预加载关键资源	使用 `<link rel="preload">` 提前加载关键资源。	✅	✅
	服务端渲染 (SSR)	使用 Nuxt.js 等框架进行服务端渲染，提升首屏加载速度。	✅	✅
	减少 HTTP 请求	合并 CSS、JS 文件，使用 CSS Sprite 等技术减少请求数量。	✅	✅
	使用 Service Workers	离线缓存资源，提升重复访问时的加载速度。	✅	✅
Webpack 打包优化	开启 Tree Shaking	移除未使用的代码，减少打包体积。	✅	❌
	代码分割 (Code Splitting)	将代码分割成多个 chunk，按需加载。	✅	✅
	使用 Terser 进行压缩	使用 Terser 插件对 JS 代码进行压缩。	✅	✅
	提取公共代码	使用 `SplitChunksPlugin` 提取公共模块，避免重复打包。	✅	✅
	使用 DLL 插件	预先打包第三方库，提升构建速度。	✅	❌
	开启缓存	使用 `cache` 选项缓存模块，提升二次构建速度。	✅	✅
	使用 webpack-bundle-analyzer 分析打包结果	分析打包后的文件，找出体积大的模块进行优化。	✅	✅
	使用 HappyPack 进行多线程构建	利用多核 CPU，提升构建速度。	✅	❌
	使用 DllReferencePlugin 引用 DLL	引用预先打包的 DLL 文件，提升构建速度。	✅	❌
	优化 Loader 配置	合理配置 Loader 的 `include` 和 `exclude` 选项，减少不必要的处理。	✅	✅
	使用 externals 排除第三方库	将第三方库通过 CDN 引入，不打包到项目中。	✅	✅
Vite 打包优化	开启 Tree Shaking	移除未使用的代码，减少打包体积。	❌	✅
	代码分割 (Code Splitting)	将代码分割成多个 chunk，按需加载。	❌	✅
	使用 Terser 进行压缩	使用 Terser 插件对 JS 代码进行压缩。	❌	✅
	提取 CSS	使用 `vite-plugin-css-split` 等插件提取 CSS 文件。	❌	✅
	开启缓存	使用 `cacheDir` 选项缓存模块，提升二次构建速度。	❌	✅
	使用 esbuild 进行转译	利用 esbuild 的高性能特性，提升构建速度。	❌	✅
	优化依赖预构建	合理配置 `optimizeDeps` 选项，减少不必要的依赖预构建。	❌	✅
	使用动态导入	按需加载模块，减少初始加载体积。	❌	✅
	使用 Rollup 插件进行优化	如 `rollup-plugin-visualizer` 分析打包结果，`rollup-plugin-commonjs` 处理 CommonJS 模块等。	❌	✅
	开启 gzip/brotli 压缩	对打包后的文件进行压缩。	❌	✅
	使用 PWA 插件	提升离线访问体验。	❌	✅