Dll

webpack5 已经不推荐使用Dll了，而是内置了缓存的技术，可以通过配置环境来提速

在将DLL前说明一下Dll的使用场景：当你发现项目开发的时候依赖的第三方插件越来越多又越来越大的时候，每次启动或者webpack完整的重新构建（非HMR）时，非常的缓慢，这个时候可以考虑Dll。

Dll看例子很难看明白，根据上面的场景解释下原理：

总共分两步：

Dll先将第三方插件代码打包出来，生成带一个单独的文件夹中，并生成对应的运行时的模块解析依赖 manifest.json，它描述了打包出的文件之间的关系和存储位置。
在本地开发的时候，通过插件直接的引入manifest，webpack读取依赖解析之后，遇到被Dll打包过的第三方依赖就不再从node_modules中加载打包了
最后，我们需要创建script标签，引入Dll打包的文件

实操

webpack.dll.js，执行的时候通过 --config filepath，运行当前文件配置

const entry = {
  // 可以尝试将多个 npm包并入一个 chunk
  jquery； ['jquery']
}

const output = {
  // 打包的库，向外暴露的名字
  library: '[name]_[hash]',
  path: resolve(__dirname, 'dll'),
  name: '[name].js'
}

const plugins = {
  new webpack.DllPlugin({
    name: '[name]_[hash]', 
    path: resolve(__dirname, 'dll/manifest.json')
  })
}

webpack.config.js

const plugins = [
  // 告诉webpack，解析manifest，当源代码遇到这些npm包的时候不要打包
  new webpack.DllReferencePlugin({
    manifest: resolve(__dirname, 'dll/manifest')
  }),
  // 这个插件负责 向 html中插入 资源，自动的根据 filepath
  new AddAssetHtmlWebpackPlugin({
    filepath: resolve(__dirname, 'dll/jquery.js')
  })
]

总结

Dll省去了第二次打包的那些事情：

当多个npm包一起从dll打包出，节省了第二次多个npm包资源合并的时间
dll打包出的资源无需二次经过loader，plugin处理
dll打包出来的资源，已经具备source-map或者其他的消耗性能和时间的runtime代码
.....

00-加快本地构建速度之Dll

Dll

实操

总结