前言
前段日子参与了一个大型项目的框架搭建,是基于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
下运行发现也是正常的:
至此我们对静态资源
的优化就结束了。
拓展
当然本篇文章只是讲述了关于优化打包大小的相关操作,在网站性能
还需大家进一步优化。
以下推荐一篇文章,在项目优化上讲的非常好。
另外推荐给大家一个图片压缩网站,可以优化我们的图片大小且是免费的。