第五章：优化打包体积
解决vuecli打包出来的项目过大的问题
当我们进行到项目最后一步，发布上线的时候。（此时你的项目无论插件完善度还是体验都已经做的非常好了。）当我信心满满的输入
npm run build
以后，我特么惊讶的发现我的js文件竟然超过了10M。那些map文件是干啥的我都不知道。
这样的结果就是，你的网站在打开之前就会消耗大量的时间去下载js。虽然下载完了以后访问是很快的。但是用户肯定不会有那么多耐心去等待你下载。
那么我们开始解决问题吧！我们的目的：把网页压缩到1M以下，让用户有闪电一般的打开速度！
1.进入问题排查环节
首先输入
npm run build --report
查看我们的打包环节上，到底是什么地方占用了资源。
输入完毕以后，会等待很久。完毕后打开浏览器http://127.0.0.1:8888
打包分析结果
会看到这张图，这里显示了到底哪个东西占用了打包后的空间。
我这个文件可见element ui就是罪魁祸首，js和支持包占用了3M多的空间。非常难受。
然后我们开始使用第一种方法：外置js和css
就是通过把非主要的js通过cdn的方式引入到页面中。因为我们追求极限，我们把所有js都通过cdn方式引入。
第一步：打开index.html先把我们需要的东西引入到里面
引入我们要加载的文件
第二步，打开webpack.babe.conf.js
在externals中增加我们引入的内容
把咱们引入的东西给加进去，这一步是为了防止打包的时候把本地的内容打包进去。
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'element-ui':'ELEMENT',
'axios':'axios',
'vuex': 'Vuex',
'jquery': '$'
},
此时注意，有一些教程里面说，需要你把main.js中import的js给注释掉，这是错误的。
如果你注释掉，你的页面中会无法使用。我们只是打包的时候，不打包这个资源，并不是就不引用了。
接着我们参考第二种方法：懒路由加载
如果你用的vuecli3以上的版本
你无需这一步，因为里面默认就是懒加载的！
{
path: '/articleMain',
name: 'articleMain',
component: resolve => require(['@/components/articleMain'], resolve),
}
我过去一直搞不清楚下面这句是什么意思。
经果调查原来是vuecli3版本新增加的懒加载功能。
把你所有的路由都这么写就行了。
经果这两步，你的页面应该会保持再1M左右。
分析结果显示体积已经明显变小了
此时最大的占用只有32K了。
3.但是我们就是要做到极限——通过oss管理图片
通过阿里oss管理图片后，把页面上所有的图片地址都替换成OSS地址。
这样静态资源进一步压缩，网页就可以再理论上达到1M以下！
网友评论