基于vue-cli npm run build之后vendor.js文件过大的解决方法
问题
vue-clinpmrunbuild命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓慢的问题。
解决方案
像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中。
1.在项目根目录index.html使用cdn节点导入
2.项目根目录下build/webpack.base.config.js中添加externals
externals:{
vue:'Vue',
'element':'element-ui',
'axios':'axios',
},
3.mian.js中import...from...就可以去掉了，若没去掉webpack还是会把对应的依赖进行打包。
2018.01.27补充
在项目config/index.js中可以开启gzip压缩，对打包优化也有很大的帮助
1.首先安装插件compression-webpack-plugin
cnpminstall--save-devcompression-webpack-plugin
2.设置productionGzip:true
//Gzipoffbydefaultasmanypopularstatichostssuchas //SurgeorNetlifyalreadygzipallstaticassetsforyou. //Beforesettingto`true`,makesureto: //npminstall--save-devcompression-webpack-plugin productionGzip:true, productionGzipExtensions:['js','css'], //Runthebuildcommandwithanextraargumentto //Viewthebundleanalyzerreportafterbuildfinishes: //`npmrunbuild--report` //Setto`true`or`false`toalwaysturnitonoroff bundleAnalyzerReport:process.env.npm_config_report
3.npmrunbuild执行后会发现每个js和css文件会压缩一个gz后缀的文件夹，浏览器如果支持g-zip会自动查找有没有gz文件找到了就加载gz然后本地解压执行。
以上这篇基于vue-clinpmrunbuild之后vendor.js文件过大的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。