阅读 2127

网站资源优化——打包从15Mb到4Mb我到底经历了什么?

本文正在参与 “性能优化实战记录”话题征文活动

前言

前段日子参与了一个大型项目的框架搭建,是基于Vue2.0+VueCli3 搭建的。 本想着写了这么久的静态页面,接口都已经开始对接起来了,打个包看下有多大。结果着实让我吓了一跳:

C1.png

这貌似和我理想中的个位数包大小相差甚远。打开文件夹查找占用最大的文件发现是.map文件

C2.png

上网搜了下.map文件的作用:

项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。  有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。 所以该文件如果项目不需要是可以去除掉。

去除.map文件

通过设置 vue.config.js文件 中的 productionSourceMap属性为falsedist包将小很多。

vue.config.js

module.exports = {
    productionSourceMap:false
}
复制代码

C3.png

至此完成了 15Mb5Mb的蜕变。

优化静态资源图片

在打包完成后我发现静态图片被打包到了一个文件夹中,且这个文件夹占用的大小也将近1Mb

C4.png

查看内容也都是一些普通的图片。

C5.png

在项目初期就这么大的资源,项目变大了还得了。且这么做在后期维护上存在诸多问题。

静态资源图片的劣势

1.在后期项目功能新增时候。同事A同事B都需要展示同一张示例图。若他们的功能不属于一个模块下,那么他们很有可能在各自的文件夹下上传相同的图片。那么打包就会产生2张相同的图片,占用2份内存资源

2.若后期功能修改删除,我们是否会想到将它老的图片删除(大多数都应该没考虑到吧)。当然我们也可以通过定期的检查是否有没用到的图片将它删除,但这往往需要很多的人力物力

C6.gif

OSS替换图片静态资源方案

我们可以通过将静态资源上传OSS的方式实现将静态资源从项目打包中分离。

C7.gif

就是将静态资源压缩后放到OSS上去管理,这样我们就不用管它在文件的哪个位置了(因为直接访问的外链地址)。

我分析了下这样的做法有以下几点优势:

  1. 去除静态资源在打包中的占用,极大的减少打包出来的体积。(可增加打包速度和减少包上传到服务器上的时间)。

  2. 资源是CDN加速的,在一般情况下会比直接放在服务器上快一点。(CDN会根据访问者地址选取最近的服务器进行资源传输)

  3. 方便维护,若某个功能去除了我们不必担心还有静态文件残留。因为引用已经被删除了,项目不会去请求不用到的静态资源。

  4. 统一化管理,项目的参与者很多,文件放的位置也不统一(目前有static下、assets下和就近的文件夹)。统一化管理后我们很轻松地就能在OSS上分找到我们的项目模块其他资源

配置OSS资源到开发环境

第一步:我们需要上传我们的资源到OSS对象存储

C8.png

复制所得到的图片URL路径。 关于如何上传OSS大家可以参考这篇文章:快速开始OSS

第二步: 配置全局OSSBaseUrl。这一步主要是为了支持后续拓展,若我们后期需要迁移或修改我们OSS的库那么只要修改OSSBaseUrl就可以了。

配置关于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 {
  backgroundurl('@{oss}/images/admin/login-box.png');
 }
</style>
复制代码

至此我们本地就可以正常访问到上传的图片了

C9.png

运行打包命令后发现比之前快了好多,打出的包也只有4Mb不到了。

C10.png

放到nginx下运行发现也是正常的:

C11.png

至此我们对静态资源的优化就结束了。

拓展

当然本篇文章只是讲述了关于优化打包大小的相关操作,在网站性能还需大家进一步优化。

以下推荐一篇文章,在项目优化上讲的非常好。

网站性能优化实战——从12.67s到1.06s的故事

另外推荐给大家一个图片压缩网站,可以优化我们的图片大小且是免费的。

tinypng.com/

文章分类
前端