本文讲述了作者在使用Vue开发项目时遇到的加载速度慢的问题，通过咨询前辈了解到是由于未切换到生产环境导致app.js文件过大。经过学习和实践，作者了解到如何切换到生产环境并进行CDN引入，成功将app.js从6MB减小到253KB。总结了包括引入CDN、webpack配置和注释Vue.use语句在内的优化流程。
之前学Vue的时候就仅仅是能够写项目的皮毛，跟着官网的脚手架，webpack模版直接就弄出来了一个项目，然后就随随便便开始写。因为大部分时间都是本地开发，所以也没注意到网络传输方面的问题。直到1.0发布了才发现，打开一次竟然要3、40s的时间，但是当时不知道是为啥，就也没管过。
直到昨天觉得不对劲问了问前辈，然后才发现原来是app.js的问题，我一直用的都是开发环境，npm run dev那种，development之前就一直在注意过也没有管。好像听别人用过build什么或者是生产环境production？ 然后昨天看到我的 app.js有6M之大！我的服务器才1M的带宽。问了学长，才知道真正的学习需要从JS到ES6然后到Nodejs再到webpack。。我的妈等不及了。
之后就好办了，去网上查了一下app.js过大怎么办，但是网上的人好歹都知道要切换到生产环境，我甚至不知道他们说的打包引入CDN有什么意义。
后来终于想起来当初，学JS的时候提到过引入cdn的事，当时也是本地开发，但是引入cdn需要每次硬核刷新都会重新加载，弄的又慢又急，最后就放弃了cdn的想法，所有东西都下载好再弄。
直到昨天我终于，第一次run了自己的production（因为用的是laravel自带的Vue，所以不用自己搭脚手架），我的app.js直接从6M变成了2M，真的恐怖这个东西。然后把Vue Vuerouter antd 全部从外部引入过来，app.js就变成了253KB，尽管terminal提示我还是大。。尽管如此，到最后我的项目还是没能全部剥离开ant design，引入css文件一是特别特别慢，二就是一直报错。。调试了半天没去查，发现是css的问题就把它又弄回项目里头打包了，具体的打包操作和懒加载操作见我学长的一片文章，本篇仅记录认知过程。
总结一下流程：具体细节不再赘述，按照网上的来说一般流程就是：
1，index.html中引入相应的CDN
（这一步把我坑惨了，因为html知识不够牢固，导致被卡住了半天。需要注意的是<script>标签一定要写在<body>标签内部，不然你怎么加CDN都是没办法找到文件的。）
2，webpack配置文件中将对应的组件暴露出来
3，注释掉自己所写过的Vue.use语句和import语句
4，重启项目即可生效
参考：
https://blog.youkuaiyun.com/yhy1315/article/details/81811427
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
