Vue项目打包终极指南：配置优化、性能提升与常见问题全解析

Webpack 深度优化策略

Webpack 虽然配置复杂，但其生态丰富，适合大型项目。在Vue项目打包中，我们需要关注以下几点：

• 多入口配置： 对于多页应用或大型单页应用，拆分入口文件可以减少初始加载量。
• Loader 优化： 使用 babel-loader 时，务必配置 exclude 和 include，避免编译 node_modules 中的代码，大幅提升构建速度。
• Plugin 插件： 启用 TerserWebpackPlugin 进行代码压缩，使用 CompressionWebpackPlugin 生成 Gzip 文件。

// webpack.config.js 示例片段
module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')], // 只编译src和test
        exclude: /node_modules/ // 排除node_modules
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // 启用代码分割
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true
        }
      }
    }
  }
};

// vite.config.js 示例片段
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'] // 手动拆分vue相关库
        }
      }
    }
  }
})