Webpack watch模式+Express Static导致Chrome刷新卡顿问题求助

嘿，我之前帮好几个开发者解决过几乎一模一样的问题——引入TypeScript后Webpack编译变慢，watch模式下刷新Chrome还会遇到JS文件pending的情况，结合你用Express static服务静态资源的场景，给你几个落地的解决方向：

1. 先优化Webpack编译速度（根源问题） #

编译时长增加会直接导致watch模式下，你刷新页面时Webpack可能还没完成新文件的生成，浏览器请求资源时自然会pending。可以从这几个点优化：

• 开启Webpack文件系统缓存：在webpack.config.js里加上cache: { type: 'filesystem' }，这样TS转译和Webpack编译的结果会被缓存，后续编译速度能提升一大截。
• 分离TS类型检查和转译：用ts-loader的transpileOnly: true模式只做代码转译，再配合fork-ts-checker-webpack-plugin把类型检查放到单独进程，这样编译时不会因为类型检查拖慢速度。配置示例：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: 'ts-loader',
              options: { transpileOnly: true }
            }
          ]
        }
      ]
    },
    plugins: [new ForkTsCheckerWebpackPlugin()]
  };
  

• 精简文件查找范围：在resolve.extensions里只保留常用的后缀，比如['.tsx', '.ts', '.js']，避免Webpack遍历不必要的文件。

2. 解决Chrome刷新时JS pending的问题 #

编译速度上来后，再调整资源缓存和服务端配置，彻底解决pending：

• 给输出文件加内容哈希：在Webpack的output里设置filename: '[name].[contenthash].js'，这样每次代码变化文件名都会更新，从根本上避免浏览器缓存旧资源。如果你的HTML是手动写的，记得配合html-webpack-plugin自动生成HTML，它会自动引入带哈希的JS文件，不用手动修改引用路径。
• 禁用Express静态资源缓存：开发环境下完全不需要缓存静态资源，给express.static加配置关闭缓存：

  app.use(express.static('dist', {
    maxAge: 0, // 强制浏览器不缓存
    etag: false, // 关闭文件标识缓存
    lastModified: false // 关闭基于修改时间的缓存
  }));
  

• 换成Webpack Dev Middleware代替Express static：如果上面的方法还不行，建议用webpack-dev-middleware和webpack-hot-middleware来托管静态资源，它们会和Webpack编译进程联动，只有当编译完成后才会把资源返回给浏览器，从根源避免请求pending，还支持热模块替换（HMR），不用手动刷新页面。配置示例：

  const webpack = require('webpack');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  const webpackConfig = require('./webpack.config.js');
  
  // 给入口添加HMR客户端
  webpackConfig.entry.yourEntryName.unshift('webpack-hot-middleware/client?reload=true');
  // 添加HMR插件
  webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
  
  const compiler = webpack(webpackConfig);
  // 挂载dev middleware
  app.use(webpackDevMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath
  }));
  // 挂载hot middleware
  app.use(webpackHotMiddleware(compiler));
  

3. 额外排查点 #

如果还是有问题，可以检查：

• Chrome的开发者工具里，勾选「Disable cache」（在Network标签下），临时禁用浏览器缓存，测试是否是缓存导致的问题。
• Webpack的watchOptions是否正确配置，比如ignored: /node_modules/，避免监听node_modules里的文件，提升watch响应速度。

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