Webpack 优化 - 提高 Webpack 打包速度的 6 种方法-JavaScript中文网-JavaScript教程资源分享门户

Web开发中，Webpack已成为前端开发中不可或缺的工具。但是，随着项目变得越来越大复杂，Webpack的打包速度也变得非常慢，尤其是在开发过程中，这可能消耗大量的时间。因此，本篇文章将介绍6种提高Webpack打包速度的方法，希望能为大家解决此类问题。

1. 缩小打包范围

首先，我们可以通过缩小Webpack要打包的范围来提高打包速度。方法是在Webpack配置文件中使用exclude或include属性。我们可以将不需要打包的文件或目录原则上设置为exclude，而只需要打包的文件或目录可以设置为include。这样做可以帮助Webpack减少不必要的文件解析和处理。

// javascriptcn.com 代码示例
// 只需要打包src目录下的文件
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  optimization: {
    sideEffects: true, // 可以在 package.json 中添加 sideEffects 选项以标记那些模块是 pure，意即这些模块即便不被使用也能执行一些任务（如 polyfill、自定义事件等）
    usedExports: true,
    splitChunks: {
      chunks: 'all'
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

exclude 和 include 的设置方式如下：

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, // 排除不需要打包的文件
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src/css'), // 只对src/css目录下的css文件进行打包
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

2. 使用多进程打包

Webpack打包过程本质上是一种CPU密集型任务，而Node.js是单线程执行的，所以Webpack打包运行时只能在一个线程上运行。为此，我们可以采用多进程打包技术，即让多个进程同时处理不同的代码模块，从而加快整个打包进程。

我们可以使用HappyPack来实现多进程打包。HappyPack将每一个 loader 的下发任务分别交给每个 HappyPack 实例中创建的子进程完成，从而实现多线程执行任务。以下是使用 HappyPack 的示例。

// javascriptcn.com 代码示例
const happyPackPlugin = require('happypack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'happypack/loader?id=js' // 使用HappyPack处理js文件
      },
      {
        test: /\.css$/,
        use: 'happypack/loader?id=css' // 使用HappyPack处理css文件
      }
    ]
  },
  plugins: [
    new happyPackPlugin({
      id: 'js',
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }]
    }),
    new happyPackPlugin({
      id: 'css',
      use: ['style-loader', 'css-loader']
    })
  ]
};

3. 使用DLL Plugin

DLL Plugin是一种特殊的插件，它可以将稳定的代码打包成一个单独的动态链接库，这样我们就可以在开发时可以只需要打包自己开发的代码而不需要打包所有依赖的第三方库，从而大大缩短了Webpack的打包时间。每次打包只需要使用动态链接库即可，而不需要重新打包整个项目。

Webpack提供了一个DllPlugin插件来实现动态链接库的打包。我们可以在配置文件中设置entry属性，并将需要单独打包的模块作为数组传入，进行打包。

// javascriptcn.com 代码示例
// webpack.dll.config.js

module.exports = {
  mode: 'production',
  entry: {
    jquery: ['jquery']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dist'),
    library: '[name]_dll'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll',
      path: path.resolve(__dirname, 'dist/[name].manifest.json')
    })
  ]
};

在主配置文件中，我们需要使用DllReferencePlugin插件来引用动态链接库：

// javascriptcn.com 代码示例
// webpack.config.js

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist/jquery.manifest.json') // 指定动态链接库的manifest文件路径
    })
  ]
};

4. 启用缓存

当我们修改了源代码并重新打包时，Webpack会重新编译整个项目。但是，在一些情况下，我们修改的仅仅是少数个别的文件。如果我们能对这些文件启用缓存机制，就可以快速打包项目。

Webpack提供了两种缓存方式：内存缓存和持久化缓存。

内存缓存：当我们使用--watch命令时，Webpack默认每次更新文件时都会将编辑过的文件放入内存中进行缓存，这样下次打包时就不用编译缓存中的文件，只需要编译修改后的文件就可以，从而提高打包速度。

持久化缓存：Webpack 5以上版本自带的缓存机制，通过在配置文件启用cache选项即可使用。持久化缓存可以将缓存结果存在本地磁盘中，下次打包时可以直接使用，从而加快Webpack的打包速度。示例如下：

// javascriptcn.com 代码示例
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  cache: {
    type: 'filesystem'
  }
};

5. Tree Shaking

Tree Shaking是一种JavaScript优化技术，可以删除应用程序中未使用的代码。在Webpack中，可以通过设置optimization选项中的usedExports值为true来开启Tree Shaking。

另外，我们还需要在package.json中添加sideEffects属性，以指明那些模块是pure模块（没有副作用的模块），并且可以被Tree Shaking。如：

// javascriptcn.com 代码示例
// package.json

{
  "name": "my-app",
  "sideEffects": [
    "*.css",
    "*.less"
  ],
  "devDependencies": {
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  }
}

6. 开启Scope Hoisting

Scope Hoisting是一种可以减少JavaScript代码量的优化技术，可以将模块中import和export的语句打包成一个函数调用，从而减少代码体积。

在Webpack中，可以通过在optimization选项中开启concatenateModules来开启Scope Hoisting。

// javascriptcn.com 代码示例
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    concatenateModules: true
  }
};

总结

通过本文介绍的方法，我们可以有效缩短Webpack的打包时间，从而提高开发效率。同时，以上方法也可以结合使用，以达到最佳优化效果。但是，需要注意的是，不同的项目可能存在不同的无法预测的问题，所以我们需要根据具体情况来选择最佳的优化方案。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65378e687d4982a6eb01ba4a