这一节的代码位于 09_optimisation/9_3_dllPlugin

在使用一些框架并且这些代码并不需要频繁打包时, 可以将其抽离出来形成一个独立的库

DllPlugin

它能把第三方库代码分离开，并且每次文件更改的时候，它只会打包该项目自身的代码。所以打包速度会更快。
这里用react举例, 安装使用react后:
yarn add react react-dom
image.png

  • 此时如果打包, 或者运行开发环境, 所生成的js代码非常大:
  • image.png
  • 于是我们可以将react提前打包, 并使用链接的方式引入, 新建一个打包react的webpack配置
  • image.png
  • 对要打包的模块进行配置:
  • image.png
  • 运行 npx webpack --config wepack.config.react.js 打包生成react库
  • image.png
  • 其中 _dll_react.js 就是抽离的react包, 并且对外暴露了一个可以引用的变量
  • image.png
  • 而 manifest.json 的任务清单则是标明应该去打包文件中的何处寻找代码
  • image.png

  • image.png

  • 正式的webpack配置中, 引用动态链接库:

  • image.png
  • html中添加
  • image.png
  • 此时再重新打包或者运行开发环境, 打包的代码就小了
  • image.png