面试题：Webpack的HappyPack与DllPlugin在提升打包速度方面的协作机制

HappyPack：它将任务分解给多个子进程去并发执行。Webpack在打包时，通常对文件的loader处理是单线程的，例如babel-loader转译代码会耗费较多时间。HappyPack利用Node.js的多进程特性，将这些耗时任务分配到多个进程并行处理，从而加速打包。
DllPlugin：它把一些不常变动的第三方库提前打包成dll文件。在正常打包时，Webpack不再重复处理这些库，而是直接引用已生成的dll文件，大大减少了打包的模块数量和处理时间。
协作方式：DllPlugin提前分离并打包稳定的第三方库，减少了HappyPack并行处理的任务总量。HappyPack则能更高效地处理剩下的业务代码相关的loader任务，因为任务变少且可并行执行，两者相互配合显著提升打包速度。

DllPlugin配置要点：
- webpack.dll.js配置：
  - 使用DllPlugin插件，定义context为项目根目录，name指定dll库名（例如[name]_[hash]），path指定生成的manifest文件路径。
  - 在entry中指定需要提取的第三方库，如['react', 'react - dom']。
- webpack.config.js配置：
  - 使用DllReferencePlugin插件，通过manifest属性引入webpack.dll.js生成的manifest文件，告知Webpack如何引用dll文件。
HappyPack配置要点：
- 安装HappyPack：确保项目中安装了happy - pack。
- webpack.config.js配置：
  - 创建HappyPack实例，指定id（如babel），loaders为原本的loader配置（如['babel - loader']），threads指定进程数（根据机器性能合理设置，一般为CPU核心数）。
  - 在module.rules中，将原本应用于特定文件类型（如.js）的loader替换为HappyPackLoader，并通过options.id指定对应的HappyPack实例id。

星途面试题库