vuecli2框架介绍（五）优化打包体积

第五章：优化打包体积

解决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以下！