从新手到大神：剖析Webpack提取第三方库的正确姿势

前端

2023-12-26 20:05:00

前言

在现代前端开发中，Webpack已成为构建工具的标配。它能够将各种类型的资源打包成一个或多个文件，方便浏览器加载和执行。随着项目规模的增大和代码复杂度的提升，我们经常需要将第三方库单独提取出来，以提高代码的可维护性、性能和用户体验。

第三方库提取的意义

提取第三方库的好处有很多，主要体现在以下几个方面：

减少请求次数：第三方库通常比较庞大，如果将其与项目代码混合打包，则会导致浏览器每次加载页面时都必须重新下载这些库。通过提取第三方库，我们可以将它们缓存起来，从而减少不必要的重复请求，提高页面加载速度。
优化代码性能：第三方库通常包含了许多我们不需要的功能。通过提取它们，我们可以只加载项目真正需要的部分，从而减小代码体积、提高代码执行效率。
增强模块化和代码复用：提取第三方库可以将项目代码和第三方库分离，形成清晰的模块结构。这不仅有利于代码维护和更新，还可以方便不同项目之间的代码复用。
提高浏览器缓存利用率：浏览器缓存机制可以有效减少重复请求，从而提高页面加载速度。通过提取第三方库，我们可以让浏览器将它们缓存更长时间，从而提高缓存利用率。

提取第三方库的两种常用方法

目前，提取第三方库最常用的两种方法是：

手动提取： 这种方法需要我们手动将第三方库的代码从项目代码中分离出来，并将其打包成独立的文件。这种方法虽然灵活，但需要花费更多的时间和精力。
借助插件提取： 我们可以使用Webpack的提取插件（如webpack-externals-plugin和webpack-extract-import-chunk-plugin）来自动提取第三方库。这种方法更方便，但灵活性稍差。

具体实现步骤

以下是如何使用Webpack提取第三方库的具体步骤：

安装必要的Webpack插件：

npm install --save-dev webpack-externals-plugin webpack-extract-import-chunk-plugin

在Webpack配置中添加插件：

const externalsPlugin = new webpack.ExternalsPlugin('commonjs', {
  jquery: 'jQuery',
});
const extractPlugin = new webpack.ExtractImportChunkPlugin({
  name: 'vendor',
});

在Webpack配置中添加提取规则：

module.exports = {
  // ...其他配置
  plugins: [
    externalsPlugin,
    extractPlugin,
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
          enforce: true,
        },
      },
    },
  },
};