vue项目提取第3方插件及公共代码至单独文件

使用vue开发项目，项目打包后发现chunk-vendors.xxx.js体积总是很大，项目大点会超过1M，之前一直想把这个问题解决，但却不知道怎么解决，最近有位掘金大佬写了篇文章把我这么久以来的困扰解开了，跟着大佬的解决方案走了一遍，成功的把一些第3方依赖(如vuex、element ui、axios)及公共代码提取出来了，为了记录下困扰我已久的问题被解决所以就写了这篇文章。
掘金大佬文章： Vue多页面优化踩坑记录

项目依赖

功能	依赖文件
es6语法转es5语法	npm i babel-loader @babel/core @babel/preset-env -D
es6新api转换	npm install --save @babel/polyfill npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime-corejs3
webpack	npm install webpack webpack-cli -D
清除文件插件	npm install clean-webpack-plugin -D
将JavaScript或者CSS插入 到webpack插件生成的HTML中	npm install add-asset-html-webpack-plugin -D

生成.babelrc文件，并写入如下代码：

{  
"presets": [  
   [ "@babel/preset-env" ]
 ], 
 "plugins": [
   [ "@babel/plugin-transform-runtime",
     { "absoluteRuntime": false,
     "corejs": 3,
     "helpers": true,
     "regenerator": true,
     "useESModules": false
     }
    ] 
   ]
 }  

使用

1.将webpack.dll.config.js、.babelrc文件拷贝至项目跟目录(文件在GitHub上)

2.修改webpack.dll.config.js中的代码

1.修改dll文件存放目录(根据需要修改，也可以不修改)  
2.修改entry

3.在vue.config.js中的configureWebpack中添加生成dll文件配置
4.在package.json文件中的script添加一条命令，"dll": "webpack -p --progress --config .webpack.dll.config.js"

打包

在执行打包命令前一定要先执行生成dll文件的命令，即先执行npm run dll，然后在执行npm run build

运行npm run dll命令后会在/public/dll目录中生成一个xxx.dll.js和xxx.manifest.json文件，其中xxx就是webpack.dll.config.js
中entry中的key

GitHub项目地址

vue项目提取第3方插件及公共代码至单独文件：vue-extract-plugins