webpack优化配置-dll方式将第三方库独立打包

先------------------2024-02-01 14:36

首先，我们需要使用 DllPlugin 插件将第三方库打包成一个独立的文件，然后再在项目中引入这个文件。

安装 DllPlugin 插件

shell 复制代码

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-manifest-plugin

创建一个新的 webpack 配置文件，比如 webpack.dll.config.js，并添加以下内容：
javascript 复制代码
```
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'lodash'], // 第三方库的名称
  },
  output: {
    path: path.resolve(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, 'dll', '[name]-manifest.json'),
      name: '[name]',
    }),
  ],
};
```
这里的 entry 字段是一个对象，键是你想要将哪些第三方库打包成独立文件，值是这些第三方库的名称。在这个例子中，我们将 react、react-dom 和 lodash 打包成一个名为 vendor 的文件。

output 字段配置了输出的文件路径和文件名，library 字段定义了生成的文件的变量名。

plugins 字段使用 DllPlugin 插件，指定了生成的 manifest 文件的路径和名称。
在 package.json 文件中添加以下脚本命令：
json 复制代码
```
"scripts": {
  "dll": "webpack --config webpack.dll.config.js"
}
```
运行命令 npm run dll，会在项目根目录下生成一个 dll 文件夹，里面包含了生成的第三方库的文件和 manifest 文件。

在项目的 webpack 配置文件中，添加以下内容来引入生成的第三方库文件：

javascript 复制代码

const webpack = require('webpack');
const path = require('path');

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, 'src'),
      manifest: require('./dll/vendor-manifest.json'),
    }),
  ],
};

这里的 DllReferencePlugin 插件用于引入生成的 manifest 文件。

通过以上步骤，我们就可以使用 DllPlugin 插件将第三方库独立打包，并在项目中引入生成的文件。这样做可以提高构建速度，减少了第三方库的重新打包时间。