最近要把vue脚手架开发的一个项目上线，只知道vue脚手架是基于node的服务端项目，那么只需要 npm run dev 就可以轻松启动整个项目，当我想当然的给服务器配置合适的node环境（这里也遇到了坑，服务器系统对node版本的兼容性等），然后想当然的把整个项目源文件拷贝到服务器上，满心欢喜地去线上测试~~
悲剧发生了，停在启动页（首页）迟迟没有反应。我嘞个去，一看network请求，app.js这个被webpack打包的引用依赖文件足足14.7M，我的天，我用的测试服务器只有1M的带宽，也就是说客户机网络足够快，再忽略掉传输损耗等因素，这个页面也得加载十几秒（理想状态下）。实际的情况是一两分钟之后app.js才能加载完成，开始首页渲染。这肯定是不能接受的情况。
怎么解决呢？我的踩坑过程是这样的（如果是一步到位看最终解决方案，请跳过，直接看最后一部分）
1.找寻webpack打包app.js的原理和优化方案，没想到网上遇到这种情况的还挺多，
于是乎，就按照上面的方案去做，把vue\vue-resouce、vue-router等取消本地依赖打包，换成静态资源外链的形式，app.js突飞猛进缩小到了8M,但是还是不行啊，加载时间还是1min左右，这肯是还是不行的了。当时的想法是能缩减到2M左右，这样作为开发者的我还算能接受，用户能不能接受我就不知道了。哈哈哈。
项目中用到了echart和v-chart这两个东西比较大。感觉肯定吃掉了我很大的空间，预示就想把他们外链出去，想法是对的，但是v-charts的外链依然碰壁连连。确实这样做貌似也看到了曙光，app.js可以缩小到3M，但是v-charts在项目中不起作用了，所以说我可能看到的只是假象。
2.基于前面的尝试，让我觉得应该寄希望于webpack打包机制，于是乎做好了啃新的准备，看了一上午，把代码优化到7M左右，效果不明显啊！
我甚至觉得我之前的依赖有多余的吧，要不要精简一下，但是不好下手，删一个就报错。准备重构项目了！又去安装了脚手架的3.0版，哎，3.0.和2.0还是差别蛮大的，也是一鼻子灰。
然后就是最后的解决方法了，其实就是一个误区啦！！（稍后更新）