webpack优化——Dllplugin

前言
我入行的时候前端框架就盛行，react、angular、vue等框架大行其道。这些框架的好处是十分显然的，便捷、快速且稳定。如果框架搭建的足够便捷不熟悉业务的人也能够快速上手项目，拿vue-cli来说，现成的脚手架已经集成了webpack、eslint、bable等常见框架的基础配置，而这些配置未必最优却通用性很强，对于初学者来说甚者可以不去了解这些常见框架就可以直接上手开发了。正是由于框架的便捷性，使得框架更加流行。vue-cli3更是直接把配置内置在了第三方插件里，让你在工作目录中完全看不到基础配置可以专心于业务开发。各类框架正在往更便捷更傻瓜式的道路上越走越远。但是这对开发者来说是一件值得警惕的事情，框架隐藏相对复杂的黑盒不意味着我们可以不去关心其内部原理，因为通用并不意味着最优。因此本文尝试去讨论webpack优化方案。本文为webpack系列第一篇dllplugin优化。

---

DllPlugin优化
再讲DllPlugin之前，不得不先提到dll，首先依例放一个百度举的例子

动态链接库英文为DLL，是Dynamic Link Library的缩写。DLL是一个包含可由多个程序，同时使用的代码和数据的库。
可以更为容易地将更新应用于各个模块，而不会影响该程序的其他部分。例如，您可能具有一个工资计算程序，而税率每年都会更改。当这些更改被隔离到
DLL 中以后，您无需重新生成或安装整个程序就可以应用更新。

具体到前端就是，如果你使用vue技术栈来开发，你改动了一行业务代码这势必不会影响vue源码，但是你构建的时候发现了所有的代码都被重新构建了，这显然是不合理的，而dllplugin就是解决这个问题的。让我们将第三方库这种无论我们怎么改业务代码构建结果都不会发生改变的模块单独拆出来构建，下次只要不改变第三方库就直接引用现成的构建结果就可以了。

那要怎么使用呢？
因为webpack己经内置了对动态链接库的支持,所以只需要通过DllPlugin打包出动态链接库和用DllReferencePlugin在主构建中引入动态链接库就可以了。以下将会具体去讲这两个步骤。

1、构建动态链接库文件
构建文件需要和主配置分开写，因为主配置是用于打包主文件的，而动态链接库会作为主构建的依赖文件打包成库

const path = require('path')
const webpack = require('webpack')
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin')

// dll文件存放的目录
const dllPath = 'dll'

module.exports = {
   
  entry: {
   
    // 需要提取的库文件
    vendor: [