webpack优化方法

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

一、构建速度优化

1. 缩小文件搜索范围

javascript 复制代码

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）：

javascript 复制代码

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

3. 缓存机制

babel-loader缓存 ：

javascript 复制代码

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

hard-source-webpack-plugin （模块级缓存）：
javascript 复制代码
```
new HardSourceWebpackPlugin()
```

二、输出体积优化

1. Tree Shaking

前提条件 ：
- 使用ES6模块语法（import/export）
- 在package.json中设置"sideEffects": false
生产模式自动启用 ：
javascript 复制代码
```
mode: 'production'
```

2. 代码分割（Code Splitting）

javascript 复制代码

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

3. 图片优化

javascript 复制代码

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

三、长效缓存策略

1. 文件哈希命名

javascript 复制代码

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

2. 模块ID稳定

javascript 复制代码

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

3. 动态导入（Lazy Loading）

javascript 复制代码

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

四、高级优化手段

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

javascript 复制代码

// 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. 可视化分析

生成分析报告 ：
bash 复制代码
```
webpack --profile --json > stats.json
```
使用Webpack Bundle Analyzer：
javascript 复制代码
```
new BundleAnalyzerPlugin()
```

五、开发体验优化

1. 热更新加速

javascript 复制代码

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

2. Devtool选择

javascript 复制代码

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

优化效果对比示例

优化手段	构建时间减少	产物体积减少
多线程+缓存	40%~60%	-
Tree Shaking	-	15%~30%
Code Splitting	-	首屏减少50%+