Webpack 优化策略

1. 构建速度优化

缓存优化

// 使用 cache 配置启用持久化缓存
module.exports = {
  cache: {
    type: 'filesystem', // 使用文件系统缓存
    buildDependencies: {
      config: [__filename]
    }
  }
};

多线程构建

const threadLoader = require('thread-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader'
        ]
      }
    ]
  }
};

externals 外部依赖

// 将大型库作为外部依赖，避免打包
module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

2. 打包体积优化

Tree Shaking

// 确保使用 ES6 模块语法以启用 Tree Shaking
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false // 或指定有副作用的文件
  }
};

代码分割

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        }
      }
    }
  }
};

动态导入

// 使用动态导入实现按需加载
const module = await import('./heavy-module.js');

// 路由级别的代码分割
const Home = () => import('./Home.vue');

3. 资源优化

压缩优化

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

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true // 移除 console
          }
        }
      }),
      new CssMinimizerPlugin()
    ]
  }
};

图片优化

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: { progressive: true },
              optipng: { enabled: false },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              }
            }
          }
        ]
      }
    ]
  }
};

4. 解析优化

别名和扩展

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components')
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    // 减少文件系统调用
    modules: [path.resolve(__dirname, 'src'), ...nodeModulesPaths]
  }
};

精确匹配

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'), // 精确指定目录
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

5. 开发环境优化

模块热替换 (HMR)

module.exports = {
  devServer: {
    hot: true,
    client: {
      overlay: false
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

Source Map 优化

module.exports = {
  devtool: process.env.NODE_ENV === 'development' 
    ? 'eval-source-map' 
    : 'source-map'
};

6. 分析和监控

Bundle 分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false
    })
  ]
};

构建性能分析

module.exports = {
  stats: {
    preset: 'minimal',
    timings: true,
    errors: true,
    warnings: true
  }
};

7. 高级优化策略

预加载和预获取

// 在路由中使用魔法注释
const Login = () => import(
  /* webpackChunkName: "login" */
  /* webpackPrefetch: true */
  './Login.vue'
);

预构建依赖

// 使用 webpack 5 的缓存功能
module.exports = {
  experiments: {
    lazyCompilation: true // 懒编译未使用的模块
  }
};

DLL 插件（适用于大型项目）

// webpack.dll.js
module.exports = {
  entry: {
    vendor: ['react', 'react-dom']
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dll/[name].manifest.json')
    })
  ]
};