Webpack 性能优化全面指南

Webpack 作为现代前端构建工具的核心，其性能优化对开发体验至关重要。以下是针对多进程处理、代码分割和摇树优化的详细解决方案：

一、多进程处理优化

1. 使用 thread-loader 实现多进程打包

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1, // CPU核心数减1
              workerParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

2. 并行压缩插件 TerserWebpackPlugin

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

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 启用并行压缩
        terserOptions: {
          // 其他压缩选项
        }
      })
    ]
  }
}

3. HappyPack (Webpack 4及以下版本)

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',
        include: [path.resolve('src')]
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
}

二、代码分割优化

1. 动态导入 (Dynamic Imports)

// 使用import()语法实现按需加载
button.addEventListener('click', () => {
  import('./module').then(module => {
    module.default();
  });
});

2. SplitChunksPlugin 配置优化

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

3. 路由级代码分割 (React/Vue)

// React示例
const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Router>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </Suspense>
  );
}

三、摇树优化 (Tree Shaking)

1. 基础配置

module.exports = {
  mode: 'production', // 必须为production
  optimization: {
    usedExports: true,
    sideEffects: true
  }
}

2. package.json 配置

{
  "sideEffects": [
    "*.css",
    "*.scss",
    "@babel/polyfill"
  ]
}

3. Babel 配置注意事项

{
  "presets": [
    ["@babel/preset-env", { "modules": false }] // 必须设置modules: false
  ]
}

4. 针对CSS的摇树优化

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true })
    })
  ]
}

四、综合优化建议

1. 缓存优化：

   • 使用 cache-loader
   • 配置 babel-loader 的 cacheDirectory

2. DLL 预编译：

   const DllPlugin = require('webpack/lib/DllPlugin');
   
   module.exports = {
    entry: {
      vendor: ['react', 'react-dom', 'lodash']
    },
    output: {
      filename: '[name].dll.js',
      path: path.resolve(__dirname, 'dist'),
      library: '[name]_[hash]'
    },
    plugins: [
      new DllPlugin({
        name: '[name]_[hash]',
        path: path.join(__dirname, 'dist', '[name]-manifest.json')
      })
    ]
   };
   

3. 资源压缩：

   • 图片压缩使用 image-webpack-loader
   • 使用 compression-webpack-plugin 生成gzip文件

4. 分析工具：

   • webpack-bundle-analyzer 分析包内容
   • speed-measure-webpack-plugin 测量各loader/plugin耗时

通过以上多方面的优化组合，可以显著提升Webpack的构建速度和应用性能。建议根据项目实际情况选择适合的优化策略，并定期使用分析工具检查优化效果。