vite打包配置基础

Vite：优化前端打包的利器

Vite（法语意为“快速”）是由 Vue.js 之父尤雨溪开发的一款现代化的前端构建工具，其设计目标是通过提供更快的冷启动速度、更高效的热更新和智能的按需编译打包机制，极大地提升前端开发体验。本文将详细介绍如何利用 Vite 对项目进行优化打包。

Vite 的核心优势与打包原理

1. 即时编译 - Vite 利用 ES 模块原生支持的浏览器特性，在开发模式下无需预先构建即可实现模块的按需加载和实时编译，大大提高了开发时的启动速度和热更新效率。

2. 预构建缓存 - 在生产环境打包时，Vite 使用 Rollup 进行代码压缩、优化和树 shaking，同时会充分利用缓存，避免重复构建已无变化的依赖资源。

3. 按需编译 - Vite 可以只对更改过的文件进行重新编译，而不是全量编译，这在大型项目中尤其能体现出高效性。

Vite 打包优化实践

配置优化

• 公共路径设置：通过配置 base 参数可以指定静态资源的公共路径，从而使得生成的资源链接更加合理。

// vite.config.js

export default {

  base: './', // 根据实际需求调整

  // ...其他配置项

}

• 压缩优化：Vite 内置了生产环境下的代码压缩功能，确保上线前的代码体积最小化。

• Tree Shaking：Vite 使用 Rollup 作为默认的打包器，它本身就具有优秀的 Tree Shaking 能力，确保仅打包项目真正使用的代码。

按需加载与动态导入

利用 Vite 的 ES 模块动态导入功能，可以显著降低首屏加载的 JavaScript 大小：

import(/* @vite-ignore */'./moduleA').then((module) => {

  // 使用 moduleA

});

利用插件扩展能力

Vite 支持丰富的插件系统，可以根据项目的具体需求安装对应的优化插件，如提取 CSS 为单独文件、图片压缩、SVG 矢量图转 Symbol 等。

分包策略

对于大型项目，可以结合 Vite 的路由分析插件，实施合理的分包策略，比如基于页面或组件拆分代码库，减小单个 JS 包体积，提高加载速度。

总结起来，Vite 以其独特的设计理念和强大的功能，提供了全新的前端开发和打包体验。通过合理配置和使用 Vite，开发者能够有效地优化项目打包流程，提升应用性能，并享受到前所未有的高效开发过程。

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { visualizer } from 'rollup-plugin-visualizer'

// 获取环境变量
const env = loadEnv(process.env.NODE_ENV, process.cwd())

export default defineConfig({
  // 项目根路径
  root: './',
  
  // 应用的基础路径（例如部署到子目录时设置为'/my-app/'）
  base: env.BASE_URL,

  // 开发服务器配置
  server: {
    host: '0.0.0.0', // 设置服务器监听的主机名或 IP 地址，默认为localhost
    port: 3000, // 设置服务器端口号
    open: true, // 自动打开浏览器
    cors: true, // 启用跨域支持
    hmr: { overlay: false }, // 关闭热更新错误提示
    proxy: { // 代理配置
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },

  // 构建目标
  build: {
    // 输出目录
    outDir: 'dist',
    
    // 是否在输出目录保留源码映射文件
    sourcemap: true,

    // 是否开启 Tree Shaking
    treeshake: true,

    // 静态资产处理
    assetsDir: 'assets',
    
    // CSS 打包策略（例如：'css' 或 ['css', { modules: true }]）
    cssCodeSplit: true,

    // 指定 rollup 插件
    rollupOptions: {
      input: 'src/main.js',
      output: {
        entryFileNames: '[name].[hash].js',
        chunkFileNames: 'chunks/[name].[hash].js',
        assetFileNames: 'assets/[ext]/[name].[hash][extname]',
      },
      plugins: [
        // 使用插件示例
        visualizer({ open: true }),
      ],
    },

    // 压缩选项
    minify: 'terser', // 或者指定自定义压缩插件
    
    // 分包配置
    splitChunks: {
      minSize: 10000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 10,
      maxInitialRequests: 5,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.[chunkhash].js',
        },
      },
    },
  },

  // 插件配置
  plugins: [
    vue(),
    // 其他插件...
  ],

  // 编译器配置
  esbuild: {
    // ESBuild 相关选项
    jsxInject: `import * as React from 'react'`, // 对于 JSX 支持
  },

  // 预加载资源
  preload: 'auto',

  // 预解析资源
  preFetch: true,

  // 配置别名
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      // 其他别名...
    ],
  },

  // 浏览器兼容性配置
  optimizeDeps: {
    include: ['vue-demi'],
    exclude: ['some-unwanted-package'],
  },
})

以上示例中包含了 Vite 的核心配置项，但具体配置应根据实际项目需求进行调整。同时，Vite 不断引入新的功能和优化，建议查阅最新的官方文档以获取最新最全的配置选项。