webpack dllPlugin将第三方公用某块抽取出来

在单页应用项目中，我们通常会引用很多的第三方模块，比如jQuery，React，antd,moment等。当我们在打包的时候，webpack默认会把这些模块重新打包，导致打包的时间非常长。为了尽量减少打包的时间，我们最好把这些第三方库先打包成一个动态库。下次打包的时候不需要重新打包这些库，直接引用接口。
下面以例子进行说明。
我们要做的其实两点：
1、将这些库打包成dll包
2、引用dll包，打包业务代码

假如我们要打包这些库。

  "dependencies": {
    "antd": "^3.19.6",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "vue": "^2.6.10"
  }

首先新建一个 dll.config.js文件，里面主要内容是

   entry: {
       "lib": vendors, // 设置入口 vendors = ['antd','jquery','moment'...]
   },
   output: {
       path: path.resolve(process.cwd(), 'lib'), // 设置生成的js文件目录
       filename: '[name].js',       // 这里的name是lib
       library: '[name]', // 生成的lib.js文件开头 var lib=function(n){v...
   },
   plugins: [
       new webpack.DllPlugin({
           path: path.resolve(__dirname,'manifest.json'), // 生成manifest.json文件
           name: '[name]',
       }),
   ]

我们执行webpack --config dll.config.js即可完成第1步功能:创建动态链接库。

第2步：打包业务代码，并引用dll.config.js
我们现在html模板中引入该js

<script src="./lib/lib.js"></script>

然后在webpack.config.js中写入如下配置

plugins:[
      new CleanWebpackPlugin(), // 清空发布目录
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: path.join(__dirname,'manifest.json')
    }),
    new copyWebpackPlugin([ //因发布目录会被清空，所以每次要把动态链接库拷贝过去
      {
        from:'./lib',
        to:'lib'
      }
    ])
]

业务逻辑index.js中引入上述公用的第三方模块。

import jquery from 'jquery'
import moment from 'moment'
import vue from 'vue'
import antd from 'antd'
import react from 'react'
import reactDom from 'react-dom'

再执行webpack --config webpack.config.js即可。
观察生成的index.js中，代码非常小。只有5k左右。而生成的lib.js非常大，有2.5M左右。基本实现了我们的功能。

存在的问题
1、为什么生成的Lib.Js会这么大，有2.5M。如果我不用dll，代码全部打包到index.js中，只有538K。观察了一下，两个都压缩了。但是前者太大了。
2、如果有新加了第三方模块，那么lib.js必须要更新。但是目前没有办法做自动检测更新。