vite打包配置基础

Vite：优化前端打包的利器

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

Vite 的核心优势与打包原理

即时编译 - Vite 利用 ES 模块原生支持的浏览器特性，在开发模式下无需预先构建即可实现模块的按需加载和实时编译，大大提高了开发时的启动速度和热更新效率。
预构建缓存 - 在生产环境打包时，Vite 使用 Rollup 进行代码压缩、优化和树 shaking，同时会充分利用缓存，避免重复构建已无变化的依赖资源。
按需编译 - Vite 可以只对更改过的文件进行重新编译，而不是全量编译，这在大型项目中尤其能体现出高效性。

Vite 打包优化实践

配置优化

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


// vite.config.jsexport 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 地址，默认为localhostport: 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 Shakingtreeshake: 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'],},
})