让webpack打包更快：两个值得一试的小优化

webpack 打包速度对于构建前端项目至关重要，它直接影响了开发人员的迭代效率和项目交付速度。本文将介绍两个小优化， giúp cải thiện tốc độ đóng gói webpack của bạn đáng kể.

优化一：使用babel7

babel7 是 JavaScript 编译器的最新版本，它拥有比 babel6 更快的编译速度和更小的代码体积。此外，babel7 还支持最新的 JavaScript 语法特性，例如 async/await、class 等，这使得它成为构建现代 JavaScript 项目的理想选择。

要将 babel7 集成到 webpack 项目中，你需要在项目的 package.json 文件中添加以下依赖：

"devDependencies": {
  "babel-core": "^7.0.0-bridge.0",
  "babel-loader": "^8.0.0",
  "babel-plugin-transform-runtime": "^7.0.0-bridge.0",
  "babel-preset-env": "^7.0.0-bridge.0"
}

然后，在项目的 webpack 配置文件中，你需要将 babel-loader 添加到 loaders 数组中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};

优化二：使用@babel/preset-typescript代替ts-loader

ts-loader 是一个用于编译 TypeScript 代码的 webpack loader。但是，ts-loader 会默认读取项目的 tsconfig.json 文件，这会导致它在每次构建时都对整个项目的 TypeScript 代码进行检查，即使只打包其中一部分代码。

使用 @babel/preset-typescript 可以替代 ts-loader。@babel/preset-typescript 不会读取 tsconfig.json 文件，因此它只编译实际打包的 TypeScript 代码。这可以大大提高 webpack 的打包速度，尤其是对于大型项目。

要将 @babel/preset-typescript 集成到 webpack 项目中，你需要在项目的 package.json 文件中添加以下依赖：

"devDependencies": {
  "@babel/core": "^7.0.0-bridge.0",
  "@babel/loader": "^8.0.0",
  "@babel/plugin-transform-runtime": "^7.0.0-bridge.0",
  "@babel/preset-typescript": "^7.0.0-bridge.0"
}

然后，在项目的 webpack 配置文件中，你需要将 @babel/preset-typescript 添加到 presets 数组中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'babel-loader',
        options: {
          presets: [
            "@babel/preset-typescript"
          ]
        }
      }
    ]
  }
};

以上就是两个小优化，它们可以显著提高 webpack 的打包速度。如果你正在苦恼于 webpack 打包速度慢的问题，不妨尝试一下。