Webpack 与 Vite 优化配置项详解与对比

一、Webpack 优化配置项案例

1. 构建性能优化

1.1 缩小文件搜索范围

javascript

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      components: path.resolve(__dirname, 'src/components')
    },
    modules: [path.resolve(__dirname, 'node_modules')],
    mainFields: ['main', 'module']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

作用说明：

extensions：减少文件后缀尝试次数，只解析指定扩展名
alias：创建导入路径别名，减少路径解析时间
modules：指定模块查找目录，避免全局搜索
include/exclude：明确指定处理范围，避免对 node_modules 进行不必要的编译

1.2 使用 Cache 提升二次构建速度

javascript

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    },
    cacheDirectory: path.resolve(__dirname, '.temp_cache')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      }
    ]
  }
}

作用说明：

cache.type: 'filesystem'：启用文件系统缓存，二次构建速度提升 50%-80%
buildDependencies：当配置文件变化时自动失效缓存
babel-loader cacheDirectory：缓存 Babel 编译结果

1.3 多进程/多实例构建

javascript

const os = require('os')
const HappyPack = require('happypack')
const threadLoader = require('thread-loader')

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length - 1 })

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: os.cpus().length - 1,
              workerParallelJobs: 50,
              poolTimeout:
                process.env.NODE_ENV === 'production' ? 500 : Infinity
            }
          },
          'babel-loader'
        ]
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
}

作用说明：

thread-loader：开启多线程编译，适用于大型项目
HappyPack：将任务分解到多个子进程并行处理
建议仅在项目较大时使用，小项目反而会增加通信开销

1.4 使用 externals 排除大型依赖

javascript

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    lodash: '_',
    moment: 'moment',
    axios: 'axios'
  },
  externalsType: 'window'
}

作用说明：

将大型库通过 CDN 引入，不打包进 bundle
显著减少打包体积和构建时间
需要在 HTML 中手动引入对应的 CDN 脚本

2. 输出优化（代码分割与压缩）

2.1 SplitChunksPlugin 代码分割

javascript

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10
        },
        react: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'react-vendor',
          chunks: 'all',
          priority: 20
        },
        lodash: {
          test: /[\\/]node_modules[\\/]lodash[\\/]/,
          name: 'lodash',
          chunks: 'all',
          priority: 20
        },
        commons: {
          name: 'commons',
          minChunks: 2,
          chunks: 'initial',
          priority: 5,
          reuseExistingChunk: true
        }
      }
    },
    runtimeChunk: {
      name: 'runtime'
    }
  }
}

作用说明：

chunks: 'all'：对同步和异步模块都进行分割
minSize：最小分割文件大小（20KB）
cacheGroups：自定义分割策略，将第三方库单独打包
runtimeChunk：将运行时代码单独提取，便于长期缓存

2.2 代码压缩优化

javascript

const TerserPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: process.env.NODE_ENV === 'production',
            drop_debugger: true,
            pure_funcs: ['console.log']
          },
          format: {
            comments: false
          }
        },
        extractComments: false
      }),
      new CssMinimizerPlugin({
        parallel: true,
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
              normalizeWhitespace: false
            }
          ]
        }
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].chunk.css'
    })
  ]
}

作用说明：

TerserPlugin：压缩 JavaScript，支持多线程并行
drop_console：生产环境移除 console
CssMinimizerPlugin：压缩 CSS 代码
MiniCssExtractPlugin：提取 CSS 到单独文件

2.3 Tree Shaking 优化

javascript

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: true,
    minimize: true
  },
  package.json: {
    sideEffects: [
      '*.css',
      '*.scss',
      '*.less'
    ]
  }
}

作用说明：

usedExports：标记未被使用的导出
sideEffects：配合 package.json 的 sideEffects 字段，安全地删除未使用的模块
只对 ES Module 生效，CommonJS 不支持

3. 缓存优化配置

3.1 文件名 Hash 策略

javascript

module.exports = {
  output: {
    filename: 'js/[name].[contenthash:8].js',
    chunkFilename: 'js/[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[name].[contenthash:8][ext]'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].chunk.css'
    })
  ]
}

作用说明：

contenthash：基于文件内容生成 hash，内容不变则 hash 不变
:8：截取前 8 位，减少文件名长度
实现长期缓存，只更新变化的文件

3.2 模块 ID 稳定化

javascript

module.exports = {
  optimization: {
    moduleIds: 'deterministic',
    chunkIds: 'deterministic'
  }
}

作用说明：

moduleIds: 'deterministic'：基于模块名称生成短数字 ID
chunkIds: 'deterministic'：基于 chunk 名称生成短数字 ID
保证模块顺序变化不影响 hash 值

4. 开发体验优化

4.1 DevServer 配置

javascript

module.exports = {
  devServer: {
    hot: true,
    open: true,
    compress: true,
    port: 8080,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    },
    static: {
      directory: path.join(__dirname, 'public'),
      publicPath: '/public'
    },
    client: {
      overlay: {
        errors: true,
        warnings: false
      }
    }
  }
}

作用说明：

hot：热模块替换，无需刷新页面即可更新
compress：启用 gzip 压缩
proxy：API 代理，解决跨域问题
overlay：在浏览器中显示编译错误

4.2 SourceMap 配置

javascript

module.exports = {
  devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map'
}

作用说明：

开发环境 eval-cheap-module-source-map：构建快，映射到源码行
生产环境 source-map：完整的 source map，便于调试
hidden-source-map：生成但不关联，用于错误上报

5. 资源处理优化

5.1 图片资源优化

javascript

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|webp|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        },
        generator: {
          filename: 'images/[name].[contenthash:8][ext]'
        }
      }
    ]
  },
  plugins: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminGenerate,
        options: {
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['jpegtran', { progressive: true }],
            ['optipng', { optimizationLevel: 5 }],
            ['svgo', { plugins: [{ name: 'removeViewBox', active: false }] }]
          ]
        }
      }
    })
  ]
}

作用说明：

asset：自动选择 base64 内联或单独文件
maxSize：小于 8KB 转 base64
ImageMinimizerPlugin：压缩图片资源

5.2 字体资源处理

javascript

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[contenthash:8][ext]'
        }
      }
    ]
  }
}

6. 构建分析工具

javascript

const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'bundle-report.html'
    })
  ]
}

const smp = new SpeedMeasurePlugin()
module.exports = smp.wrap(config)

作用说明：

BundleAnalyzerPlugin：可视化分析打包体积
SpeedMeasurePlugin：测量各 loader 和 plugin 耗时

二、Vite 优化配置项案例

1. 开发服务器优化

1.1 基础 DevServer 配置

javascript

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    cors: true,
    strictPort: true,
    hmr: {
      overlay: true
    },
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
        configure: (proxy, options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err)
          })
        }
      }
    }
  }
})

作用说明：

host: '0.0.0.0'：允许局域网访问
strictPort：端口被占用时报错而非自动切换
hmr.overlay：在浏览器中显示错误覆盖层
proxy：开发环境 API 代理

1.2 预构建优化

javascript

export default defineConfig({
  optimizeDeps: {
    include: ['react', 'react-dom', 'react-router-dom', 'axios', 'lodash-es'],
    exclude: ['your-linked-package'],
    esbuildOptions: {
      plugins: []
    },
    force: false
  }
})

作用说明：

include：强制预构建的依赖，避免页面加载时重新构建
exclude：排除不需要预构建的包
force：强制重新构建依赖
Vite 使用 esbuild 将 CommonJS/UMD 转换为 ESM

2. 构建输出优化

2.1 代码分割策略

javascript

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: id => {
          if (id.includes('node_modules')) {
            if (id.includes('react') || id.includes('react-dom')) {
              return 'react-vendor'
            }
            if (id.includes('lodash')) {
              return 'lodash'
            }
            if (id.includes('antd') || id.includes('@ant-design')) {
              return 'antd-vendor'
            }
            return 'vendor'
          }
        },
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: assetInfo => {
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]
          if (/\.(png|jpe?g|gif|svg|webp|ico)$/i.test(assetInfo.name)) {
            return 'images/[name]-[hash].[ext]'
          }
          if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.name)) {
            return 'fonts/[name]-[hash].[ext]'
          }
          if (/\.css$/i.test(assetInfo.name)) {
            return 'css/[name]-[hash].[ext]'
          }
          return 'assets/[name]-[hash].[ext]'
        }
      }
    }
  }
})

作用说明：

manualChunks：自定义代码分割策略
chunkFileNames：chunk 文件命名规则
assetFileNames：静态资源分类输出

2.2 压缩配置

javascript

import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log']
      },
      format: {
        comments: false
      }
    },
    cssMinify: 'lightningcss',
    cssCodeSplit: true
  },
  plugins: [
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,
      deleteOriginFile: false
    }),
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br'
    })
  ]
})

作用说明：

minify: 'terser'：使用 Terser 压缩（默认 esbuild 更快）
cssMinify: 'lightningcss'：使用 LightningCSS 压缩 CSS
vite-plugin-compression：生成 gzip/brotli 预压缩文件

2.3 Chunk 大小警告与限制

javascript

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          router: ['react-router-dom'],
          'ui-vendor': ['antd', '@ant-design/icons']
        }
      }
    }
  }
})

作用说明：

chunkSizeWarningLimit：调整 chunk 大小警告阈值（KB）
通过 manualChunks 拆分大型依赖

3. 依赖优化

3.1 外部化依赖

javascript

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['react', 'react-dom', 'lodash'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          lodash: '_'
        }
      }
    }
  }
})

作用说明：

external：排除不打包的依赖
globals：配置全局变量映射
适用于库开发或 CDN 引入场景

3.2 Tree Shaking 配置

javascript

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        exports: 'auto',
        interop: 'auto'
      },
      treeshake: {
        preset: 'recommended',
        moduleSideEffects: (id, external) => {
          if (id.endsWith('.css')) return true
          return false
        }
      }
    }
  }
})

作用说明：

treeshake.preset: 'recommended'：启用推荐的 Tree Shaking 配置
moduleSideEffects：标记有副作用的模块

4. CSS 处理优化

4.1 CSS 预处理器配置

javascript

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
        api: 'modern-compiler'
      },
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#1890ff',
          'border-radius-base': '4px'
        }
      }
    },
    modules: {
      localsConvention: 'camelCaseOnly'
    },
    devSourcemap: true
  }
})

作用说明：

additionalData：自动注入全局样式变量
modifyVars：修改主题变量（如 Ant Design 主题定制）
localsConvention：CSS Modules 类名格式

4.2 PostCSS 配置

javascript

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('autoprefixer')({
          overrideBrowserslist: ['> 1%', 'last 2 versions']
        }),
        require('postcss-pxtorem')({
          rootValue: 16,
          propList: ['*', '!border*'],
          selectorBlackList: ['.el-']
        }),
        require('cssnano')({
          preset: ['advanced', { discardComments: { removeAll: true } }]
        })
      ]
    }
  }
})

作用说明：

autoprefixer：自动添加浏览器前缀
postcss-pxtorem：px 转 rem 适配移动端
cssnano：CSS 压缩优化

5. 静态资源优化

5.1 图片资源处理

javascript

import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  build: {
    assetsInlineLimit: 8192,
    assetsDir: 'assets'
  },
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      svgo: {
        plugins: [
          { name: 'removeViewBox', active: false },
          { name: 'removeEmptyAttrs', active: true }
        ]
      }
    })
  ]
})

作用说明：

assetsInlineLimit：小于 8KB 转 base64
vite-plugin-imagemin：图片压缩

5.2 静态资源 CDN 配置

javascript

export default defineConfig({
  base: 'https://cdn.example.com/',
  build: {
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  }
})

6. 插件生态优化

6.1 常用插件配置

javascript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
import visualizer from 'rollup-plugin-visualizer'
import vitePluginImp from 'vite-plugin-imp'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    react(),
    vue(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    }),
    visualizer({
      open: false,
      gzipSize: true,
      brotliSize: true
    }),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: name => `antd/es/${name}/style`
        }
      ]
    }),
    AutoImport({
      imports: ['react', 'react-router-dom'],
      dts: 'src/auto-imports.d.ts'
    }),
    Components({
      resolvers: [],
      dts: 'src/components.d.ts'
    })
  ]
})

作用说明：

@vitejs/plugin-legacy：兼容旧版浏览器
rollup-plugin-visualizer：打包分析可视化
vite-plugin-imp：组件库按需导入
unplugin-auto-import：自动导入 API

6.2 构建性能优化插件

javascript

import { defineConfig } from 'vite'
import vitePluginBuildOptimizer from 'vite-plugin-build-optimizer'

export default defineConfig({
  plugins: [
    vitePluginBuildOptimizer({
      lodash: {
        include: ['get', 'set', 'cloneDeep']
      }
    })
  ],
  build: {
    rollupOptions: {
      onwarn(warning, warn) {
        if (warning.code === 'EVAL') return
        warn(warning)
      }
    }
  }
})

7. 环境变量与模式

javascript

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    define: {
      __APP_VERSION__: JSON.stringify('1.0.0'),
      __API_BASE_URL__: JSON.stringify(env.VITE_API_BASE_URL)
    },
    envPrefix: 'VITE_',
    build: {
      sourcemap: mode === 'development',
      minify: mode === 'production' ? 'terser' : 'esbuild'
    }
  }
})

作用说明：

loadEnv：加载环境变量
define：定义全局常量
envPrefix：环境变量前缀过滤

三、Webpack 与 Vite 详细对比

1. 核心架构对比

对比维度	Webpack	Vite
打包原理	先打包所有模块，再启动服务	利用浏览器原生 ESM，按需编译
开发启动	需要分析整个依赖图，启动慢	无需打包，毫秒级启动
热更新	重新编译修改模块及其依赖	只编译修改的单个模块
构建工具	自研打包器	开发用 esbuild，生产用 Rollup
配置复杂度	配置项多，学习曲线陡峭	约定优于配置，开箱即用

2. 性能对比

场景	Webpack	Vite	差异原因
冷启动	10-30秒（大型项目）	100-300毫秒	Vite 无需打包
热更新	1-3秒	50-200毫秒	Vite 只编译单文件
生产构建	30-60秒	20-40秒	Rollup 更高效
内存占用	较高	较低	无需维护完整依赖图

3. 功能特性对比

特性	Webpack	Vite
代码分割	SplitChunksPlugin，配置灵活	Rollup manualChunks，配置简洁
Tree Shaking	支持（需 ESM）	原生支持
CSS 处理	loader 链式处理	原生支持，配置简单
TypeScript	ts-loader/babel-loader	原生支持（esbuild 编译）
环境变量	DefinePlugin	内置支持
代理配置	devServer.proxy	server.proxy
插件生态	成熟丰富	快速增长
SSR 支持	需要配置	内置支持

4. 配置复杂度对比

Webpack 配置示例（完整配置）

javascript

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash:8].js',
    chunkFilename: 'js/[name].[contenthash:8].chunk.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: { maxSize: 8 * 1024 }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css'
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    },
    runtimeChunk: { name: 'runtime' }
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: { '@': path.resolve(__dirname, 'src') }
  },
  devServer: {
    hot: true,
    port: 8080,
    proxy: {
      '/api': { target: 'http://localhost:3000' }
    }
  }
}

Vite 配置示例（等效功能）

javascript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' }
  },
  server: {
    port: 8080,
    proxy: {
      '/api': { target: 'http://localhost:3000' }
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendors: ['react', 'react-dom']
        }
      }
    }
  }
})

对比结论： Vite 配置代码量减少约 70%，更简洁直观。

5. 适用场景对比

场景	推荐工具	原因
新项目（React/Vue）	Vite	开发体验极佳，配置简单
新项目（Vue 3）	Vite	Vue 官方推荐，深度集成
大型企业项目	视情况	Webpack 生态成熟，Vite 性能优
老项目迁移	Webpack	迁移成本低，兼容性好
库开发	Vite	Rollup 输出更规范
微前端项目	Webpack	Module Federation 成熟
SSR 项目	Vite	内置 SSR 支持
复杂自定义构建	Webpack	插件和 loader 生态丰富

6. 迁移建议

从 Webpack 迁移到 Vite

评估依赖兼容性
- 检查是否使用了 Webpack 特有的 loader/plugin
- 确认依赖是否支持 ESM
配置迁移
- resolve.alias → resolve.alias
- devServer.proxy → server.proxy
- DefinePlugin → define
- SplitChunksPlugin → build.rollupOptions.output.manualChunks
代码调整
- 确保使用 ESM 导入语法
- 移除 require.context（使用 import.meta.glob）
- 环境变量从 process.env 改为 import.meta.env
生态替代
Webpack Vite 替代
babel-loader @vitejs/plugin-react / @vitejs/plugin-vue
css-loader 内置支持
sass-loader 内置支持（需安装 sass）
file-loader 内置支持
html-webpack-plugin 内置支持

Webpack	Vite 替代
babel-loader	@vitejs/plugin-react / @vitejs/plugin-vue
css-loader	内置支持
sass-loader	内置支持（需安装 sass）
file-loader	内置支持
html-webpack-plugin	内置支持

7. 总结

维度	Webpack 优势	Vite 优势
生态成熟度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
开发体验	⭐⭐⭐	⭐⭐⭐⭐⭐
配置简洁度	⭐⭐	⭐⭐⭐⭐⭐
构建性能	⭐⭐⭐	⭐⭐⭐⭐⭐
功能完整性	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
学习曲线	⭐⭐	⭐⭐⭐⭐⭐
生产输出	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

最终建议：

新项目优先选择 Vite：开发体验好，配置简单，性能优秀
现有 Webpack 项目：评估迁移成本，大型项目可保持现状
特殊需求场景：需要 Module Federation、复杂 loader 链等，Webpack 更合适

React 基础与核心思想

React 状态管理方案

React Hooks 深度解析

React 性能优化与新特性

渲染和性能

DOM/事件模型

异步/网络/安全

前端攻防安全

经典布局案例

Webpack 与 Vite 优化配置项详解与对比 ​

一、Webpack 优化配置项案例 ​

1. 构建性能优化 ​

1.1 缩小文件搜索范围 ​

1.2 使用 Cache 提升二次构建速度 ​

1.3 多进程/多实例构建 ​

1.4 使用 externals 排除大型依赖 ​

2. 输出优化（代码分割与压缩） ​

2.1 SplitChunksPlugin 代码分割 ​

2.2 代码压缩优化 ​

2.3 Tree Shaking 优化 ​

3. 缓存优化配置 ​

3.1 文件名 Hash 策略 ​

3.2 模块 ID 稳定化 ​

4. 开发体验优化 ​

4.1 DevServer 配置 ​

4.2 SourceMap 配置 ​

5. 资源处理优化 ​

5.1 图片资源优化 ​

5.2 字体资源处理 ​

6. 构建分析工具 ​

二、Vite 优化配置项案例 ​

1. 开发服务器优化 ​

1.1 基础 DevServer 配置 ​

1.2 预构建优化 ​

2. 构建输出优化 ​

2.1 代码分割策略 ​

2.2 压缩配置 ​

2.3 Chunk 大小警告与限制 ​

3. 依赖优化 ​

3.1 外部化依赖 ​

3.2 Tree Shaking 配置 ​

4. CSS 处理优化 ​

4.1 CSS 预处理器配置 ​

4.2 PostCSS 配置 ​

5. 静态资源优化 ​

5.1 图片资源处理 ​

5.2 静态资源 CDN 配置 ​

6. 插件生态优化 ​

6.1 常用插件配置 ​

6.2 构建性能优化插件 ​

7. 环境变量与模式 ​

三、Webpack 与 Vite 详细对比 ​

1. 核心架构对比 ​

2. 性能对比 ​

3. 功能特性对比 ​

4. 配置复杂度对比 ​

Webpack 配置示例（完整配置） ​

Vite 配置示例（等效功能） ​

5. 适用场景对比 ​

6. 迁移建议 ​

从 Webpack 迁移到 Vite ​

7. 总结 ​

Webpack 与 Vite 优化配置项详解与对比

一、Webpack 优化配置项案例

1. 构建性能优化

1.1 缩小文件搜索范围

1.2 使用 Cache 提升二次构建速度

1.3 多进程/多实例构建

1.4 使用 externals 排除大型依赖

2. 输出优化（代码分割与压缩）

2.1 SplitChunksPlugin 代码分割

2.2 代码压缩优化

2.3 Tree Shaking 优化

3. 缓存优化配置

3.1 文件名 Hash 策略

3.2 模块 ID 稳定化

4. 开发体验优化

4.1 DevServer 配置

4.2 SourceMap 配置

5. 资源处理优化

5.1 图片资源优化

5.2 字体资源处理

6. 构建分析工具

二、Vite 优化配置项案例

1. 开发服务器优化

1.1 基础 DevServer 配置

1.2 预构建优化

2. 构建输出优化

2.1 代码分割策略

2.2 压缩配置

2.3 Chunk 大小警告与限制

3. 依赖优化

3.1 外部化依赖

3.2 Tree Shaking 配置

4. CSS 处理优化

4.1 CSS 预处理器配置

4.2 PostCSS 配置

5. 静态资源优化

5.1 图片资源处理

5.2 静态资源 CDN 配置

6. 插件生态优化

6.1 常用插件配置

6.2 构建性能优化插件

7. 环境变量与模式

三、Webpack 与 Vite 详细对比

1. 核心架构对比

2. 性能对比

3. 功能特性对比

4. 配置复杂度对比

Webpack 配置示例（完整配置）

Vite 配置示例（等效功能）

5. 适用场景对比

6. 迁移建议

从 Webpack 迁移到 Vite

7. 总结