使用谷歌开源程序 Squoosh 搭建专属图片压缩网站

教程分享评论1,174字数 1068阅读模式

Squoosh是谷歌开源的一个图片在线压缩程序,我们可以使用它来搭建我们自己的图片压缩网站。Squoosh 是用 nodejs 开发的,所以,在正式搭建前需要先安装 nodejs 环境。今天,就来为大家分享一下使用谷歌开源程序 Squoosh 搭建专属图片压缩网站的过程。

使用谷歌开源程序 Squoosh 搭建专属图片压缩网站-图片1

下载地址

Github 地址:https://github.com/GoogleChromeLabs/squoosh/

安装

1、安装 nodejs

nodejs 的安装过程此处就不详细介绍了,大家可以自行百度一下。

2、克隆仓库

指定安装目录,比如 opt:

cd /opt

克隆代码:

git clone https://github.com/GoogleChromeLabs/squoosh.git

完成后,会发现 opt 目录下多了 squoosh 目录。
使用谷歌开源程序 Squoosh 搭建专属图片压缩网站-图片2

3、安装 squoosh

切换到 squoosh 目录下

cd squoosh

执行下面两条命令

npm install
npm run build

4、启动服务:

npm start

运行结果:

使用谷歌开源程序 Squoosh 搭建专属图片压缩网站-图片3

可以看到,监听端口为 8080。

我们也可以通过后台进程运行模式来启动服务,命令:

nohup npm start &

5、开放端口

开放 8080 端口,具体可以参考下面的两篇文章:

CentOS7开放端口及开启防火墙

在 Ubuntu 中用 UFW 配置防火墙

6、访问

用浏览器访问 http://101.200.45.166:8080(将 ip 换成自己的),如下图所示:

使用谷歌开源程序 Squoosh 搭建专属图片压缩网站-图片4

配置域名

为了方便起见,我们可以配置一个域名,假设域名为:squoosh.pieruo.com。

1、配置域名

推荐宝塔面板配置,如果是其他方式,大家可以自行百度一下。

使用谷歌开源程序 Squoosh 搭建专属图片压缩网站-图片5

2、解决错误

通过域名访问,会提示 Invalid Host header 错误。这是由于新版的 webpack-dev-server 出于安全考虑,默认会检查 hostname 参数,如果 hostname 不是配置内的,将中断访问。可以在 webpack.dev.config.js 中添加如下配置即可:

//webpack.dev.config.js
devServer: {
    disableHostCheck: true,
}

其中,webpack.dev.config.js 文件在根目录下。

3、访问

用浏览器访问 http://squoosh.pieruo.com(将域名换成自己的),如下图所示:

使用谷歌开源程序 Squoosh 搭建专属图片压缩网站-图片6

结束语

Squoosh 是一个非常不错的网片压缩程序,如果感兴趣的话,我们可以用它来搭建我们自己的专属图片压缩网站。Squoosh 搭建的步骤很简单,不过,在执行的过程中,可能会提示一些错误信息,可以通过升级 nodejs 和 npm 解决。

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

夏日阳光
  • 本文由 夏日阳光 发表于 2020年10月9日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/155.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证