Vue进阶（贰零柒）：细说Webpack中的Loader

前端

2024-02-23 02:14:16

前言

从事前端开发的童鞋在面试过程中，多少都会遇到以下2个有关webpack编译过程性能问题：

Webpack的编译速度很慢
Webpack打包后的文件体积很大

针对这些问题，我们其实可以通过优化Webpack的配置来得到改善。其中，优化Loader的配置可以非常有效的提高Webpack的编译速度和减少打包后的文件体积。

优化方案

2.1 优化Loader

对于 Loader 来说，影响打包效率首当其冲必属 Babel-loader，一般项目中基本都会使用到，那么我们就针对它进行优化。

2.1.1 减少Babel-loader的编译范围

减少Babel-loader的编译范围最直接有效的办法就是排除node_modules文件夹，因为node_modules中的代码一般不需要被转译，我们只需要在webpack.config.js文件中将node_modules排除掉即可。

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

当然，有时候我们可能也会需要编译node_modules中的某些代码，那么我们可以通过配置babel.config.js文件来指定需要编译的node_modules中的代码。

module.exports = {
  presets: [
    '@babel/preset-env',
  ],
  ignore: [
    // node_modules/*,
    'node_modules/some-package/*',
  ],
};

2.1.2 使用Babel缓存

Babel-loader支持缓存，我们可以通过在webpack.config.js文件中配置cacheDirectory选项来启用缓存。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
      },
    ],
  },
};

开启缓存后，Babel-loader会将编译后的文件缓存到磁盘上，当下次编译时，Babel-loader会直接从缓存中读取文件，从而大大提高编译速度。

2.2 优化其他Loader

除了Babel-loader之外，我们还可以优化其他Loader的配置来提高Webpack的编译速度和减少打包后的文件体积。

2.2.1 使用HappyPack

HappyPack是一个第三方Loader，它可以将多个Loader组合在一起，并使用多进程来并行编译代码。通过使用HappyPack，我们可以大大提高Webpack的编译速度。

const HappyPack = require('happypack');

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

2.2.2 使用DllPlugin

DllPlugin是一个Webpack插件，它可以将一些公共代码打包成一个单独的文件，并在以后的编译中直接引用这个文件，从而减少编译时间和打包后的文件体积。

const DllPlugin = require('webpack-dll-plugin');

module.exports = {
  plugins: [
    new DllPlugin({
      name: 'dll',
      path: 'dll/mainfest.json',
    }),
  ],
};

2.3 优化Webpack的其他配置

除了优化Loader的配置之外，我们还可以优化Webpack的其他配置来提高Webpack的编译速度和减少打包后的文件体积。

2.3.1 使用thread-loader

thread-loader是一个第三方Loader，它可以将Webpack的编译过程并行化，从而大大提高编译速度。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'thread-loader',
          options: {
            workers: 2,
          },
        },
      },
    ],
  },
};

2.3.2 使用mini-css-extract-plugin

mini-css-extract-plugin是一个Webpack插件，它可以将CSS代码从JS代码中提取出来，并将其打包成一个单独的文件，从而减少打包后的文件体积。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};