本文正在参与 “性能优化实战记录”话题征文活动
前言
前段日子参与了一个大型项目的框架搭建，是基于Vue2.0+VueCli3 搭建的。 本想着写了这么久的静态页面，接口都已经开始对接起来了，打个包看下有多大。结果着实让我吓了一跳：
这貌似和我理想中的个位数包大小相差甚远。打开文件夹查找占用最大的文件发现是.map文件
上网搜了下.map文件的作用：
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 所以该文件如果项目不需要是可以去除掉。
去除.map文件
通过设置 vue.config.js文件 中的 productionSourceMap属性为false，dist包将小很多。
vue.config.js
module.exports = {
productionSourceMap:false
}
至此完成了 15Mb到 5Mb的蜕变。
优化静态资源图片
在打包完成后我发现静态图片被打包到了一个文件夹中，且这个文件夹占用的大小也将近1Mb。
查看内容也都是一些普通的图片。
在项目初期就这么大的资源，项目变大了还得了。且这么做在后期维护上存在诸多问题。
静态资源图片的劣势
1.在后期项目功能新增时候。同事A和同事B都需要展示同一张示例图。若他们的功能不属于一个模块下，那么他们很有可能在各自的文件夹下上传相同的图片。那么打包就会产生2张相同的图片，占用2份内存资源。
2.若后期功能修改或删除，我们是否会想到将它老的图片删除（大多数都应该没考虑到吧）。当然我们也可以通过定期的检查是否有没用到的图片将它删除，但这往往需要很多的人力物力。
OSS替换图片静态资源方案
我们可以通过将静态资源上传OSS的方式实现将静态资源从项目打包中分离。
就是将静态资源压缩后放到OSS上去管理，这样我们就不用管它在文件的哪个位置了(因为直接访问的外链地址)。
我分析了下这样的做法有以下几点优势：
-
去除静态资源在打包中的占用，极大的减少打包出来的体积。(可增加打包速度和减少包上传到服务器上的时间)。
-
资源是
CDN加速的，在一般情况下会比直接放在服务器上快一点。(CDN会根据访问者地址选取最近的服务器进行资源传输) -
方便维护，若某个功能去除了我们不必担心还有静态文件残留。因为引用已经被删除了，项目不会去请求不用到的静态资源。
-
统一化管理，项目的参与者很多，文件放的位置也不统一(目前有
static下、assets下和就近的文件夹)。统一化管理后我们很轻松地就能在OSS上分找到我们的项目、模块和其他资源。
配置OSS资源到开发环境
第一步：我们需要上传我们的资源到OSS对象存储。
复制所得到的图片URL路径。
关于如何上传OSS大家可以参考这篇文章：快速开始OSS
第二步: 配置全局OSS 的 BaseUrl。这一步主要是为了支持后续拓展，若我们后期需要迁移或修改我们OSS的库那么只要修改OSS 的BaseUrl就可以了。
配置关于img标签的地址替换：
main.js
import Vue from 'vue';
// 全局变量
Vue.prototype.$OSS = 'https://你的bucket名称.oss-cn-hangzhou.aliyuncs.com/你的bucket下的文件夹'
使用
index.vue
<div class="login-logo">
<img :src="$OSS + '/images/login/logo.png'" alt="logo" />
</div>
配置关于样式中的图片引用地址:
base.less
/* OSS地址（Less变量） */
@oss: 'https://你的bucket名称.oss-cn-hangzhou.aliyuncs.com/你的bucket下的文件夹';
使用
index.vue
<template>
<!-- 页面-->
<div id="index-box">
</div>
</template>
<style lang="less" scoped>
/*引入OSS的BaseUrl */
@import '@/assets/styles/base.less';
#index-box {
background: url('@{oss}/images/admin/login-box.png');
}
</style>
至此我们本地就可以正常访问到上传的图片了
运行打包命令后发现比之前快了好多，打出的包也只有4Mb不到了。
放到nginx下运行发现也是正常的：
至此我们对静态资源的优化就结束了。
拓展
当然本篇文章只是讲述了关于优化打包大小的相关操作，在网站性能还需大家进一步优化。
以下推荐一篇文章，在项目优化上讲的非常好。
另外推荐给大家一个图片压缩网站，可以优化我们的图片大小且是免费的。
