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