WebPack 打包优化详解-FunTeaLearn Online Web Tutorials

在现代 Web 前端开发中，Webpack 已经成为了必不可少的工具。它可以将多个 JavaScript 文件、CSS、图片等资源打包成一个或多个文件，从而减少 HTTP 请求次数，加快页面加载速度。同时，Webpack 还提供了很多优秀的功能，如代码分割、懒加载、热更新等，这些功能可以帮助我们优化项目的性能和开发效率。

但是，Webpack 的配置十分复杂，尤其是在处理大型项目时，很容易出现性能问题。本文将介绍一些 Webpack 打包优化的技巧，帮助读者更好地利用 Webpack 的优势，提高项目的性能和开发效率。

1. 优化入口文件

Webpack 的入口文件是整个项目的起点，它决定了哪些模块会被打包。如果入口文件过大，Webpack 就会把所有模块打包到一个文件中，导致文件过大，加载时间过长。因此，优化入口文件是提高 Webpack 性能的第一步。

1.1 多入口文件

如果项目中有多个入口文件，可以将它们分别打包成不同的文件。这样可以减小单个文件的大小，提高加载速度。同时，也可以避免不必要的代码被加载，减少浪费。

例如，一个简单的多页面应用程序，可以使用以下配置：

// www.javascriptcn.com code example
module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

这样就会生成两个打包文件：page1.bundle.js 和 page2.bundle.js。

1.2 拆分公共代码

如果多个入口文件有相同的依赖，可以将这些依赖提取出来，打包成单独的文件。这样可以避免重复加载相同的代码，减少浪费。

Webpack 提供了两个插件可以实现公共代码的提取：CommonsChunkPlugin 和 SplitChunksPlugin。其中 CommonsChunkPlugin 是 Webpack 3 中的插件，而 SplitChunksPlugin 是 Webpack 4 中的插件。

以下是使用 CommonsChunkPlugin 实现公共代码提取的示例：

// www.javascriptcn.com code example
module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common'
    })
  ]
};

这样就会生成三个打包文件：page1.bundle.js、page2.bundle.js 和 common.bundle.js。

2. 优化 Loader

Webpack 的 Loader 用于处理各种文件类型，如 JavaScript、CSS、图片等。在使用 Loader 时，也需要注意一些优化技巧。

2.1 使用 HappyPack

Webpack 在处理 Loader 时是单线程的，这意味着在处理大量文件时，会出现阻塞的情况，导致打包速度变慢。为了解决这个问题，可以使用 HappyPack 插件，将 Loader 的处理过程分解为多个子进程，从而加快打包速度。

以下是使用 HappyPack 插件的示例：

// www.javascriptcn.com code example
const HappyPack = require('happypack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=js'
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      loaders: [ 'babel-loader' ]
    })
  ]
};

这样就会将 babel-loader 的处理过程分解为多个子进程，从而加快打包速度。

2.2 使用缓存

Webpack 在处理 Loader 时，会缓存已经处理过的模块，以避免重复处理。但是，在某些情况下，缓存的效果并不理想。例如，当 Loader 处理的文件很大、复杂时，缓存的效果就会变得很差。此时，可以使用 cache-loader 插件，将 Loader 的处理结果缓存到磁盘上，以提高缓存的效果。

以下是使用 cache-loader 插件的示例：

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'cache-loader',
          'babel-loader'
        ]
      }
    ]
  }
};

这样就会将 babel-loader 的处理结果缓存到磁盘上，提高缓存的效果。

3. 优化输出文件

Webpack 的输出文件是我们最终要使用的文件，它们需要经过一系列的优化才能达到最佳的性能。

3.1 使用 MiniCssExtractPlugin 提取 CSS

在 Webpack 4 中，已经不再推荐使用 extract-text-webpack-plugin 插件来提取 CSS。取而代之的是 mini-css-extract-plugin 插件。该插件可以将 CSS 提取到单独的文件中，并且支持 CSS 的按需加载。

以下是使用 mini-css-extract-plugin 插件的示例：

// www.javascriptcn.com code example
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

这样就会将 CSS 提取到单独的文件中。

3.2 压缩输出文件

在 Webpack 中，可以使用 UglifyJsPlugin 和 OptimizeCssAssetsPlugin 插件来压缩 JavaScript 和 CSS 文件。这样可以减小文件大小，提高加载速度。

以下是使用 UglifyJsPlugin 和 OptimizeCssAssetsPlugin 插件的示例：

// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin(),
      new OptimizeCssAssetsPlugin()
    ]
  }
};

这样就会压缩 JavaScript 和 CSS 文件。

结语

本文介绍了一些 Webpack 打包优化的技巧，包括优化入口文件、优化 Loader 和优化输出文件。这些技巧可以帮助读者更好地利用 Webpack 的优势，提高项目的性能和开发效率。希望读者能够学习并应用这些技巧，打造出更加优秀的 Web 前端应用程序。

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

WebPack 打包优化详解