借助vite来优化前端性能

Vite 是一个现代化的前端构建工具，凭借其基于原生 ES 模块的开发服务器和高效的构建能力，可以显著优化前端性能。

一、开发环境优化

1.快速启动与热更新

• Vite 利用浏览器对 ES 模块的原生支持，在开发环境中无需打包，直接按需加载模块。

• 修改代码后，仅更新修改的部分，而不是重新构建整个应用。

2.按需加载

• 使用动态导入（import()）实现路由和组件的按需加载，减少初始加载时间。

const Home = () => import('./views/Home.vue')

二、生产环境优化

1.代码分割

• Vite 默认支持代码分割，将代码拆分为多个小块，按需加载。

• 结合动态导入，进一步优化首屏加载性能。

2.Tree Shaking

• Vite 基于 Rollup，默认支持 Tree Shaking，移除未使用的代码。

• 确保使用 ES 模块语法（import/export），避免副作用代码。

3.压缩资源

• Vite 使用 terser 压缩 JavaScript，cssnano 压缩 CSS。

• 配置 build.minify 启用压缩：

export default defineConfig({
  build: {
    minify: 'terser'
  }
})

4.图片压缩

• 使用 vite-plugin-imagemin 插件压缩图片：

npm install vite-plugin-imagemin -D

 

import imagemin from 'vite-plugin-imagemin'
export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 20 },
      pngquant: { quality: [0.8, 0.9] },
      svgo: { plugins: [{ removeViewBox: false }] }
    })
  ]
})

5.Gzip/Brotli 压缩

• 使用 vite-plugin-compression 插件生成 Gzip/Brotli 压缩文件：

npm install vite-plugin-compression -D

 

import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: 'gzip'
    })
  ]
})

6.CDN 加速

• 将静态资源上传到 CDN，并在 Vite 中配置 base：

export default defineConfig({
  base: 'https://cdn.example.com/assets/'
})

 

三、优化加载性能

1.预加载关键资源

• 使用 <link rel="preload"> 预加载关键资源：

<link rel="preload" href="/src/assets/logo.png" as="image">

2.异步加载非关键资源

• 使用 import() 动态加载非关键资源：

import('./non-critical-module.js')

3.使用 vite-plugin-pages 自动生成路由

        自动生成按需加载的路由，减少手动配置：

npm install vite-plugin-pages -D

import Pages from 'vite-plugin-pages'
export default defineConfig({
  plugins: [Pages()]
})

四、优化 CSS

1.提取 CSS

• 使用 build.cssCodeSplit 提取 CSS 文件：

export default defineConfig({
  build: {
    cssCodeSplit: true
  }
})

 

2.使用 vite-plugin-purgecss 移除未使用的 CSS

• 移除未使用的 CSS 代码：

npm install vite-plugin-purgecss -D

import purgecss from 'vite-plugin-purgecss'
export default defineConfig({
  plugins: [purgecss()]
})

五、优化缓存

1.文件哈希

• Vite 默认在文件名中添加哈希值，确保文件更新后客户端能获取最新版本。

• 配置 build.rollupOptions.output 自定义哈希：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].[hash].js`,
        chunkFileNames: `[name].[hash].js`,
        assetFileNames: `[name].[hash].[ext]`
      }
    }
  }
})

2.HTTP 缓存

• 配置服务器设置静态资源的缓存策略：

//nginx
location /assets/ {
  expires 1y;
  add_header Cache-Control "public";
}

六、性能监控与分析

1.使用 vite-plugin-inspect 分析构建结果

• 查看构建产物的详细信息：

npm install vite-plugin-inspect -D

import inspect from 'vite-plugin-inspect'
export default defineConfig({
  plugins: [inspect()]
})

2.使用 Lighthouse 进行性能测试

2. 使用 Chrome DevTools 的 Lighthouse 工具分析性能，并根据建议优化。

七、总结

通过 Vite 优化前端性能的核心策略包括：

1. 开发环境：利用按需加载和热更新提升开发效率。
2. 生产环境：代码分割、Tree Shaking、资源压缩、CDN 加速等。
3. 加载性能：预加载关键资源、异步加载非关键资源。
4. CSS 优化：提取 CSS、移除未使用的样式。
5. 缓存优化：文件哈希、HTTP 缓存。