Jiang's Tech Journal

Jiang's Tech Journal

首页
分类
关于
Login →
Jiang's Tech Journal

Jiang's Tech Journal

首页 分类 关于
Login
  1. Home
  2. 前端
  3. 关于前端开发中静态资源的压缩

关于前端开发中静态资源的压缩

0
  • 前端
  • Published at 2024-10-22
  • Read 52 times
Jiang
Jiang
Table of Contents
No Table of Contents

图片的压缩

Imagine

下载链接:https://download.jiang.in/s/k5h6?password=f7iz22

GitHub:https://github.com/meowtec/Imagine

下载后打开软件,将要压缩的图片拖进软件就可。

可见压缩后体积减少了一半,来查看一下清晰度有没有明显变化

优化前:

优化后:

可见压缩后观感并没有什么明显的变化,体积下降了一半多。

squoosh

GitHub:https://github.com/meowtec/Imagine

在线压缩网址:https://squoosh.app/

一个谷歌开发的在线压缩图片程序。

同一张图片,压缩后都用jpg格式,图片大小也是下降了一半多,且图片质量目测没有明显变化。

uTools的TinyPng插件

实测压缩后更小,图片质量大差不差。

字体的压缩

Fontmin

github:https://github.com/ecomfe/fontmin-app

官 网 :https://ecomfe.github.io/fontmin/#app

下载链接:https://download.jiang.in/s/l5i5?password=29gblh

将字体文件拖入左下角,然后在左边输入用到的文字,右边用该字体实时预览。

输入完项目用到的字体后,点击生成。

新的字体文件里面 就只有 输入的这些字符了,体积大大减小,web加载字体文件也更快速。

Related Posts

【Vue】VueUse 中 createReusableTemplate 的妙用

在 Vue 3 开发中,虽然推荐使用模板语法,但在封装高阶组件或使用特定 UI 库(如 Naive UI、Element Plus、Ant Design Vue)的表格组件时,我们往往需要编写 Render 函数(h 函数)或使用 JSX/TSX 来处理复杂的自定义列渲染。 对于不熟悉渲染函数 AP

【Vue】 组件内模板复用技巧:createReusableTemplate

在 Vue 组件开发中,我们经常遇到部分模板内容需要在同一组件内多次复用的场景。传统的解决方案如提取子组件、v-for 循环或直接复制粘贴,在某些简单场景下可能显得过于繁琐或冗余。 本文介绍一种利用 Vue 3 组合式 API 和渲染函数特性实现的“局部模板复用”技巧,类似于模板引擎中的“宏(Mac

【Vue】组件二次封装技巧

日常任务开发过程中避免不了进行 UI 组件库部分组件的二次封装使用,记录下长期开发过程中积累的一些经验和网络学习的新技巧,组件二次封装需要解决的无非就是属性 props 如何透传出去,如何复用原有组件的插槽,以及如何调用原组件暴露的方法,这里以比较热门的 UI 框架 Element Plus 为例。

【vue-admin-kit】配置驱动的 Vue 3 后台管理组件工具套件

📖 在线文档:https://vue-admin-kit.jiang.in/ 前言 在企业级后台管理系统开发中,CRUD 页面占据了大量的开发工作。搜索表单、数据表格、新增/编辑弹窗、详情展示……这些重复性的工作不仅耗时,还容易产生不一致的代码风格。 vue-admin-kit 正是为解决这一痛点

[CSS] 移除元素焦点状态

padding: '0' - 移除内边距 border: 'none' - 移除边框 outline: 'none' - 移除焦点时的轮廓线(这是关键!) boxShadow: 'none' - 移除可能的阴影效果

Node版本切换

在前端开发中,Node.js 是开发工具链的核心之一。它不仅支撑着前端构建流程,很多后端、脚本任务也依赖它。但随着 Node.js 的版本更新频繁,不同项目对版本的要求也各不相同,开发者很容易遇到这种问题: 一个项目要 Node.js 14,另一个却必须跑在 Node.js 18; 一不小心全局版本

Table of Contents
No Table of Contents
Copyright © 2024 your company All Rights Reserved. Powered by Halo.