如何优化 Webpack 在编译 TypeScript 程序时的构建速度

前言

TypeScript 是一个由 Microsoft 推出的开源编程语言，它是 JavaScript 的超集，可以在编写JavaScript代码时添加强类型支持。Webpack 是一个出色的前端构建工具，可以对整个项目进行打包管理。在使用 Webpack 进行 TypeScript 项目的构建时，有时候会遇到构建速度缓慢的问题，本文将分享一些如何优化 Webpack 在编译 TypeScript 程序时的构建速度的技巧。

技巧

1. 减少 TypeScript 编译时间

TypeScript 编译时会消耗大量时间，为了减少编译时间，可以使用 ts-loader 中提供的 happyPackMode 选项或修改 cacheDirectory 选项。happyPackMode 选项可以开启 HappyPack 编译 TypeScript 项目，从而在编译过程中使用多个线程提高编译速度。cacheDirectory 选项可以开启缓存功能来避免重复编译，但是缓存时间设定不当可能会导致编译结果不正确。

// www.javascriptcn.com code example
module: {
  rules: [
    {
      test: /\.ts$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            happyPackMode: true,  // 开启 HappyPack 编译
            cacheDirectory: true, // 开启缓存
          }
        }
      ]
    }
  ]
}

2. SplitChunksPlugin 插件的使用

在 Webpack 构建时，SplitChunksPlugin 插件可以将公共文件提取出来，在不同的模块之间进行共享。这样可以避免重复加载和打包公共模块，并且可以提高构建速度。

// www.javascriptcn.com code example
optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        name: 'commons',
        chunks: 'initial',
        minChunks: 2
      }
    }
  }
}

3. 减少打包文件体积

在打包文件体积大时，可以使用 tree shaking 和代码分离来减少打包文件体积。tree shaking 是指移除未使用的代码，而代码分离是指将多个代码块分离到不同的文件中，从而减少单个文件的大小。

// www.javascriptcn.com code example
optimization: {
  usedExports: true,
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /node_modules/,
        chunks: 'initial',
        name: 'vendor',
        enforce: true,
      },
    },
  },
  runtimeChunk: {
    name: 'manifest',
  },
},

结语

本文简单介绍了如何优化 Webpack 在编译 TypeScript 程序时的构建速度，包括减少 TypeScript 编译时间，使用 SplitChunksPlugin 插件和减少打包文件体积三个方面。这些技巧不仅适用于 TypeScript 项目的构建，也适用于其他前端项目的构建。希望本文能为大家提供帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678321f0935627c9002a9f50