网站资源优化——打包从15Mb到4Mb我到底经历了什么?
前言
前段日子参与了一个大型项目的框架搭建,是基于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
下运行发现也是正常的:
至此我们对静态资源
的优化就结束了。
拓展
当然本篇文章只是讲述了关于优化打包大小的相关操作,在网站性能
还需大家进一步优化。
作者:有趣的老凌
链接:https://juejin.cn/post/7014504173022478344