惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cisco Talos Blog
Cisco Talos Blog
S
SegmentFault 最新的问题
有赞技术团队
有赞技术团队
人人都是产品经理
人人都是产品经理
The Last Watchdog
The Last Watchdog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
T
Tenable Blog
V
Vulnerabilities – Threatpost
月光博客
月光博客
GbyAI
GbyAI
P
Privacy & Cybersecurity Law Blog
K
Kaspersky official blog
C
Cisco Blogs
Jina AI
Jina AI
T
Threatpost
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
S
Securelist
TaoSecurity Blog
TaoSecurity Blog
Google Online Security Blog
Google Online Security Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
Recent Commits to openclaw:main
Recent Commits to openclaw:main
博客园 - 【当耐特】
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
AI
AI
M
MIT News - Artificial intelligence
L
LINUX DO - 热门话题
P
Proofpoint News Feed
C
CERT Recently Published Vulnerability Notes
博客园 - Franky
T
Tailwind CSS Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
B
Blog
小众软件
小众软件
H
Hacker News: Front Page
Project Zero
Project Zero
Engineering at Meta
Engineering at Meta
腾讯CDC
PCI Perspectives
PCI Perspectives
Last Week in AI
Last Week in AI
T
Threat Research - Cisco Blogs
H
Heimdal Security Blog
Recent Announcements
Recent Announcements
V2EX - 技术
V2EX - 技术
T
Tor Project blog
F
Fortinet All Blogs
L
Lohrmann on Cybersecurity
Stack Overflow Blog
Stack Overflow Blog
Martin Fowler
Martin Fowler

codeqihan的博客

现代化的开源终端-Tabby 基于Rust开发的编辑器-Edit ChatGPT Atlas使用体验 联通宽带改桥接 Chrony安装以及配置 电信跨网QoS ungoogled-chromium浏览器简介 npm的高性能替代品pnpm 使用markdownlint-cli格式化Markdown文件 Nginx的安装以及配置 使用unattended-upgrades自动更新软件包 Debian使用Backports源 Debian切换至Testing/Sid版本 2024年度总结 轻量级的探针-Beszel ai.robots.txt阻止AI爬虫 甲骨文圣何塞ARM测评 公共DOH收集 com又涨价了
压缩网页体积
codeqihan · 2025-02-15 · via codeqihan的博客

有些时候,可能需要压缩网页或JavaScript代码的体积(减少网页和JavaScript代码体积,或许还可以提升一点点性能),这些时候,可以试试本文中的工具

如果是Hexo博客,可以使用hexo-minify这一个插件,这个插件使用html-minifier、terser和clean-css作为HTML、JavaScript和CSS的压缩库,一般情况下Hexo这个插件体验是最好的(使用插件以后,Hexo生成111个文件需要花费13秒,可以作为参考)。
安装:

1
npm install hexo-minify --save

一般情况下不需要额外设置即可使用,也可以手动配置一些参数,具体可以见GitHub仓库

如果是HTML,可以使用html-minifier,这个工具使用uglify-js和clean-css作为JavaScript和CSS的压缩库(压缩HTML内嵌的JavaScript和CSS),能很好地压缩HTML文件。如果需要更好的ES6支持,可以使用html-minifier-terser,这个工具使用terser(uglify-js的fork,对ES6有更好的支持)作为JavaScript压缩库,不过看起来这个工具很久没更新了,因此还是需要考虑是否需要ES6来做出选择。
安装:

1
npm install html-minifier -g

使用(输入input.html,去除多余字符以及注释,并压缩JavaScript以及CSS,输出output.html。所有参数具体可以见GitHub仓库):

1
html-minifier --collapse-whitespace --remove-comments --minify-js --minify-css input.html -o output.html

如果是JavaScript,推荐使用terser,这是uglify-js的fork版本,对ES6有良好的支持,并且一直在持续维护,因此推荐使用。
安装:

1
npm install terser -g

使用(压缩input.js的JavaScript代码并输出output.min.js):

1
terser input.js -o output.min.js

如果是CSS,推荐使用clean-css。如果安装了html-minifier,其实也可以使用html-minifier来压缩CSS,本身也是使用clean-css来压缩CSS,不过还是更推荐直接使用clean-css来压缩
安装:

1
npm install clean-css -g

使用(压缩input.css的CSS并输出output.min.css):

1
cleancss input.css -o output.min.css

如果想要批量压缩JavaScript代码文件,可以使用以下命令(使用terser,因此需要安装terser。建议在Linux环境下执行,也可以使用Git Bash),命令会使用find寻找.js文件,并使用terser进行压缩:

1
find 想要压缩的文件夹(如果是当前文件夹则为.) -name "*.js" -exec terser {} -o {} -c -m \;

HTML可以使用(使用html-minifier,因此需要安装html-minifier),命令会使用find寻找.html文件,并使用terser压缩(参数是–collapse-whitespace –remove-comments –minify-js –minify-css):

1
find public/ -name "*.html" -exec html-minifier --collapse-whitespace --remove-comments --minify-js --minify-css -o {} {} \;

命令可以放在Vercel或Cloudflare Pages的构建命令中,每次构建即可自动完成压缩
命令是单线程的,因此在完成一个代码文件的压缩以后才会压缩下一个,效率可能会差很多,因此更推荐使用构建工具进行构建