webpack优化方法

以下是Webpack优化的系统性策略，涵盖构建速度、输出体积、缓存优化等多个维度，配置示例和原理分析：

一、构建速度优化

1. 缩小文件搜索范围

module.exports = {
  resolve: {
    // 明确第三方模块的路径
    modules: [path.resolve('node_modules')],
    // 减少后缀尝试
    extensions: ['.js', '.jsx'], 
    // 避免默认的递归查找
    mainFiles: ['index']
  },
  module: {
    rules: [{
      test: /\.js$/,
      // 排除node_modules
      exclude: /node_modules/,
      loader: 'babel-loader'
    }]
  }
}

2. 多线程加速

• thread-loader（适合耗时loader）：

  rules: [{
    test: /\.js$/,
    use: [
      {
        loader: 'thread-loader',
        options: { workers: 3 }
      },
      'babel-loader'
    ]
  }]
  

3. 缓存机制

• babel-loader缓存：

  loader: 'babel-loader',
  options: { cacheDirectory: true }
  

• hard-source-webpack-plugin（模块级缓存）：

  new HardSourceWebpackPlugin()
  

二、输出体积优化

1. Tree Shaking

• 前提条件：
  • 使用ES6模块语法（import/export）
  • 在package.json中设置"sideEffects": false
• 生产模式自动启用：

  mode: 'production'
  

2. 代码分割（Code Splitting）

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors'
      }
    }
  },
  runtimeChunk: 'single' // 提取runtime代码
}

3. 图片优化

rules: [{
  test: /\.(png|jpg)$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 8192, // 小于8KB转base64
      name: '[name].[hash:8].[ext]'
    }
  }]
}]

三、长效缓存策略

1. 文件哈希命名

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

2. 模块ID稳定

optimization: {
  moduleIds: 'deterministic' // 避免module.id变化
}

3. 动态导入（Lazy Loading）

// React动态加载组件
const LazyComponent = React.lazy(() => import('./LazyComponent'));

四、高级优化手段

1. DLL预编译（适合大型项目）

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

// 主配置中引用
new webpack.DllReferencePlugin({
  manifest: require('./dll/manifest.json')
})

2. 可视化分析

• 生成分析报告：

  webpack --profile --json > stats.json
  

• 使用Webpack Bundle Analyzer：

  new BundleAnalyzerPlugin()
  

五、开发体验优化

1. 热更新加速

devServer: {
  hot: true, // 启用HMR
  // 关闭全量构建的校验
  watchOptions: {
    aggregateTimeout: 500,
    ignored: /node_modules/
  }
}

2. Devtool选择

// 开发环境
devtool: 'cheap-module-eval-source-map',
// 生产环境（如需调试）
devtool: 'source-map'

优化效果对比示例