老工程打包提速折腾记（下）：从 Roadhog 1.x 升级到 Webpack 4.x

升级老工程：从 Roadhog 1.x 到 Webpack 4.x 的蜕变

背景

前端工程随着时间的推移不断发展，构建工具层出不穷。在老工程的升级改造中，我们会面临各种挑战。本文将深入探讨如何将一个基于 Roadhog 1.x 的老工程升级到 Webpack 4.x，并通过优化构建配置和采用 Webpack 4 的新特性，成功提升工程打包速度。

升级步骤

移除 Roadhog

首先，我们移除工程中的 Roadhog 依赖：

npm uninstall roadhog

然后，删除 config/roadhog.ts 和 scripts/build.js 文件。

安装 Webpack 4.x

安装 Webpack 4.x 和必要的插件：

npm install webpack webpack-cli --save-dev
npm install webpack-merge babel-loader css-loader style-loader --save-dev

配置 Webpack

在 webpack.config.js 中，配置 Webpack：

const path = require('path');
const merge = require('webpack-merge');

const baseConfig = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

const devConfig = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
});

const prodConfig = merge(baseConfig, {
  mode: 'production',
});

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    return devConfig;
  }

  return prodConfig;
};

优化构建

优化 Webpack 构建配置，提升打包速度：

• 使用多进程打包： 在 webpack.config.js 中添加 parallel: true，启用多进程打包。
• 开启缓存： 在 webpack.config.js 中添加 cache: true，启用缓存。
• 使用 Source Map： 在 webpack.config.js 中配置 Source Map，便于调试。
• 优化 CSS 处理： 使用 CSS 预处理器（如 Less、Sass）可以减少 CSS 文件大小，并提升打包速度。
• 优化图片处理： 使用图片压缩工具（如 Imagemin）可以减少图片文件大小，并提升打包速度。

遇到的问题和解决方法

• 找不到 Babel 依赖： 确保已安装 Babel 依赖，并将其添加到 Webpack 配置中。
• 无法解析模块： 检查模块名称是否正确，并确保已安装相应的依赖。
• 构建速度慢： 检查构建配置，并尝试使用上述优化技巧。

提速效果

升级到 Webpack 4.x 并优化构建配置后，工程打包速度有了显著提升：

• Roadhog 1.x： 打包时间约 20 分钟
• Webpack 4.x： 打包时间约 5 分钟

总结

通过将老工程从 Roadhog 1.x 升级到 Webpack 4.x，并优化构建配置，我们成功提升了工程打包速度。本文分享的升级步骤、遇到的问题和解决方法，以及提速技巧，可供有类似需求的开发者参考。

升级老工程是一个复杂且耗时的过程，需要对新老框架有深入的了解。建议开发者在升级之前做好充分的准备，并预留充足的时间。

常见问题解答

1. 升级后有哪些显著变化？
   升级后，工程打包速度显著提升，从原来的 20 分钟缩短到 5 分钟。

2. 升级过程中可能遇到的问题是什么？
   可能遇到的问题包括找不到 Babel 依赖、无法解析模块和构建速度慢。

3. 如何解决找不到 Babel 依赖的问题？
   确保已安装 Babel 依赖，并将其添加到 Webpack 配置中。

4. 如何解决无法解析模块的问题？
   检查模块名称是否正确，并确保已安装相应的依赖。

5. 如何解决构建速度慢的问题？
   检查构建配置，并尝试使用本文介绍的优化技巧，如使用多进程打包、开启缓存和优化 CSS/图片处理。