Webpack4散记（2）dll

2023-11-07 19:35:35

在Web开发中，Webpack是一个非常流行的模块打包工具，它可以帮助我们管理代码的依赖关系，生成最终的JavaScript代码。在Webpack4中，引入了DllPlugin和DllReferencePlugin两个新的插件，这两个插件可以帮助我们优化构建性能。

所谓dll：动态链接库。这本是个windows范畴的叫法。这两天对webpack自带的DllPlugin和DllReferencePlugin两个插件做了一下研究，感觉在开发阶段的性能优化方面更适用。这个方案的核心思想是空间换时间：先使用DllPlugin生成dll包（包含第三方模块），然后在webpack打包的时候使用DllReferencePlugin引用这个dll包，这样就可以减少重复打包的工作，提高构建速度。

Webpack4中DllPlugin和DllReferencePlugin的使用方法如下：

安装DllPlugin和DllReferencePlugin插件

npm install webpack-dll-plugin dll-reference-plugin --save-dev

在webpack配置文件中配置DllPlugin插件

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

module.exports = {
  plugins: [
    new DllPlugin({
      name: 'dll', // dll包的名称
      path: path.join(__dirname, 'dll'), // dll包的输出路径
      context: __dirname, // dll包的上下文路径
      entry: {
        'react': ['react', 'react-dom'], // dll包中包含的模块
        'lodash': ['lodash']
      }
    })
  ]
};

在webpack配置文件中配置DllReferencePlugin插件

const DllReferencePlugin = require('dll-reference-plugin');

module.exports = {
  plugins: [
    new DllReferencePlugin({
      manifest: path.join(__dirname, 'dll', 'dll-manifest.json') // dll包的清单文件路径
    })
  ]
};

运行webpack命令生成dll包

webpack --config webpack.dll.config.js

在webpack配置文件中引用dll包

const DllReferencePlugin = require('dll-reference-plugin');

module.exports = {
  plugins: [
    new DllReferencePlugin({
      manifest: path.join(__dirname, 'dll', 'dll-manifest.json') // dll包的清单文件路径
    })
  ]
};