之前学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