解决Vue2.x项目打包后vendor和app文件过大的等待时间，这样的加载时间绝对让人无法忍受！经过排查，发现有2个原因：1、执行npmrunbuid命令打包后，生成的vendor.xxx.js文件过大；2、服务器带宽只有1Mbps，导致资源下载缓慢。通过科学上网，找到了很多解决方法，但大多比较零散。经过大量的折腾和踩坑，总结出以下方法和步骤，希望对有需要的同学有所帮助。1、首屏依赖的静态资源改为从index.html导入CDN资源。1.如果使用了很多第三方包，需要找出那些大包，使用npmrunbuild--report命令打包生成详细报告，根据情况决定哪些资源不使用webpack打包报告。2、以element-ui为例，在index.html文件中导入其CDN资源：引入第三方CDN资源的好处是可以减少项目所在服务器的带宽占用和流量消耗。并且当其他站点使用相同的资源时，浏览器也会默认缓存这些资源，再次请求时会优先缓存，从而大大提高加载速度；当然也有缺点，比如有些CND的不稳定。会导致项目不稳定甚至崩溃。如何选择和解决，需要读者根据具体场景考虑，这里不再赘述。3、接下来在项目build/webpack.base.js文件下，添加如下配置externals：{'element-ui':'ELEMENT'}这里的externals字段配置是为了告诉webpack下面哪些模块不需要打包到生成的js文件中，属性名是项目中导入的模块，属性值是对应的全局变量。本例中element-ui为项目中导入的模块名，ELEMENT为CDN导入的element-ui组件库暴露的全局变量。在项目中，我们仍然使用import来导入element-ui：importElementUIfrom'element-ui'重要提示：如果你不知道你通过CDN导入的资源暴露的全局变量名，你可以在中找到导出的关键字源代码。如果在浏览器中输入unpkg.com/element-ui@2.4.11/lib/index.js，我们看到前面部分有如下代码：object"==typeofexports&&"object"==typeofmodule?module。exports=t(require("vue")):"function"==typeofdefine&&define.amd?define("ELEMENT",\["vue"\],t):"object"==typeofexports?exports.ELEMENT=t(require("vue")):e.ELEMENT=t(e.Vue)可以看出，将js文件导入index.html后，会在window对象上挂载一个全局变量ELEMENTII.vue-router改为懒加载配置配置懒加载路由，让资源按需加载，直接上传代码：{path:'/console',name:'console',meta:{},component:resolve=>require(['@/pages/console/console'],resolve),children:[{路径:'home',name:'home',meta:{location:'homepage'},组件:resolve=>require(['@/pages/home/home'],resolve)},{path:'user',name:'user',meta:{location:'登录用户信息'},component:resolve=>require(['@/页面/你ser'],resolve)},{路径:'dashboard',name:'dashboard',meta:{location:'仪表盘'},component:resolve=>require(['@/pages/dashboard'],resolve)},resourceRoute,cdRoute,ciRoute,appRoute,opstoolsRoute]}
