Vite vs Webpack 打包配置优化指南

在前端构建工具中，Vite 和 Webpack 是两大主流选择，它们的优化策略截然不同。无论是面试还是实战，掌握Vite或者Webpack打包配置优化都是 Vue 开发的必备技能。

优化目标对比

优化方向	Vite 侧重点	Webpack 侧重点
构建速度	利用浏览器原生ESM实现秒级启动	通过缓存和并行编译加速
产物体积	默认支持Tree Shaking	需手动配置代码分割和压缩
开发体验	热更新速度极快	需合理配置HMR

Vite 配置优化方案

1. 加速依赖预构建

arduino 复制代码

// vite.config.js
export default {
  optimizeDeps: {
    include: ['lodash-es'], // 强制预构建指定依赖
    exclude: ['vue'],       // 排除不需要预构建的库
  }
}

作用：将常用依赖转为ESM格式缓存，提升二次启动速度

2. 分包策略优化

css 复制代码

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor': ['vue', 'vue-router'],
        'utils': ['lodash-es', 'axios']
      }
    }
  }
}

效果：将第三方库单独打包，利用浏览器缓存

3. 图片压缩配置

css 复制代码

import viteImagemin from 'vite-plugin-imagemin';
build: {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      mozjpeg: { quality: 75 }
    })
  ]
}

Webpack 配置优化方案

1. 缓存加速构建

java 复制代码

// webpack.config.js
module.exports = {
  cache: {
    type: 'filesystem', // 使用持久化缓存
  },
  module: {
    rules: [{
      test: /.js$/,
      loader: 'babel-loader',
      options: { cacheDirectory: true } // Babel缓存
    }]
  }
}

2. 多进程编译

javascript 复制代码

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({ parallel: true }), // JS多线程压缩
      new CssMinimizerPlugin(),             // CSS压缩
    ],
  },
  plugins: [
    new ThreadLoader({ workers: 4 }) // 多进程loader
  ]
}

3. 精细化代码分割

yaml 复制代码

optimization: {
  splitChunks: {
    chunks: 'all',
    maxSize: 244 * 1024, // 单文件最大244KB
    cacheGroups: {
      vendors: {
        test: /[\/]node_modules[\/]/,
        priority: -10
      }
    }
  }
}

通用优化策略

1. Tree Shaking 增强

arduino 复制代码

// 两者通用配置
{
  sideEffects: false // 在package.json中声明
}

2. Gzip/Brotli 压缩

javascript 复制代码

// Vite
import viteCompression from 'vite-plugin-compression';
plugins: [viteCompression()]

// Webpack
const CompressionPlugin = require('compression-webpack-plugin');
plugins: [new CompressionPlugin()]

3. 可视化分析工具

bash 复制代码

# Vite
npm install rollup-plugin-visualizer

# Webpack
npm install webpack-bundle-analyzer

建议

新项目：首选 Vite（特别是 Vue/React 项目）
存量项目：Webpack 逐步迁移或针对性优化
微前端：Webpack 的 Module Federation 更成熟