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 插件 提升离线访问体验。 ❌ ✅