Webpack每次构建未修改文件耗时过长问题求助

我完全懂这种每次改点小代码就要等7秒的烦躁——开发节奏被拖慢真的很影响心情。从你的配置来看，问题出在没有启用缓存机制和增量构建，所以Webpack每次都要重新编译所有文件，哪怕它们根本没修改。下面给你几个立竿见影的优化方案：

1. 开启babel-loader编译缓存 #

babel-loader是你配置里最耗时的环节之一，开启它的缓存后，已经编译过的文件会被存在本地，下次构建直接复用，不用重新转译。修改你的babel-loader配置：

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015', 'react', 'stage-2', 'stage-0'],
      plugins: ["transform-class-properties"],
      cacheDirectory: true // 新增这一行，开启缓存
    }
  }
}

2. 改用Webpack Dev Server + 热模块替换（HMR） #

你现在应该是直接运行webpack命令全量构建，换成webpack-dev-server的话，它会把打包结果存在内存里，而且开启HMR后，只会重新编译你修改过的模块，而不是整个项目。

具体步骤： #

• 先安装依赖：npm install webpack-dev-server --save-dev
• 修改你的Webpack配置：

  const webpack = require('webpack'); // 顶部引入webpack模块
  
  module.exports = {
    entry: [
      'webpack-dev-server/client?http://localhost:8080', // 新增：连接dev server
      'webpack/hot/dev-server', // 新增：启用热替换
      'babel-polyfill', 
      './src/browser/index.js'
    ],
    // ... 其他原有配置保持不变
    plugins: [
      new webpack.HotModuleReplacementPlugin() // 新增HMR插件
    ],
    devServer: {
      contentBase: './public',
      hot: true,
      port: 8080
    }
  }
  

• 在package.json的scripts里添加启动命令："start": "webpack-dev-server --mode development"
• 运行npm start，之后修改文件就能实现秒级更新了！

3. 优化devtool选项 #

你当前使用的inline-source-map虽然能提供完整的源码映射，但编译速度很慢。开发环境下换成eval-cheap-module-source-map，它的编译速度快很多，同时也能保留足够的调试信息：

devtool: 'eval-cheap-module-source-map'

4. 拆分第三方依赖（进阶优化） #

把react、babel-polyfill这些很少修改的第三方库单独打包成一个chunk，这样它们只需要编译一次，之后构建只处理你的业务代码。在配置里添加SplitChunks配置：

module.exports = {
  // ... 其他原有配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
}

这样会生成一个单独的vendors.js，只有当你更新依赖包时才会重新编译它。

按照这些步骤改完，你会发现构建时间能降到1秒以内（甚至几百毫秒），开发体验会提升很多！

内容的提问来源于stack exchange，提问作者Saraband