企业官网建设流程全解析

FreeTool 网站自上线以来，总用户数已突破4k，平均每日有超过200人访问。

FreeTool是一个集各项实用功能于一体的工具站，除前文提到的一些功能外，目前增加了一系列新功能，并对网站的访问速度进行了一系列优化。

FreeTool访问地址：https://xdxsb.top/FreeTool

新功能

xml格式化

xml格式化支持将一段未格式化的xml文本进行树状视图展开。

模板快速拼接

模板快速拼接支持将多张图片快速拼接成一张图，适合双图对比、多图展示等场景。

其中，图片的顺序可以用鼠标拖拽调整。

视频比例转换

视频比例转换支持自动将视频变成不同比例，比如将横屏视频改成竖屏制式，背景可以选择用纯色或模糊填充。

文本差异对比

文本差异对比可以将两段不同的文本进行对比查看，高亮不一致的内容行。

同时支持word/txt文件内容导入。

PDF转PPT

PDF转PPT是指将PDF文件转换成PPT的格式。

适合把NoteBookLM/秘塔AI等平台生成的PDF格式的幻灯片处理成PPT。

提示词生成器

提示词生成器针对AI绘画/视频/写作/PPT四个场景，配置了一些即点即用的模板，这些形容词往往是一些“开关”，添加前后可能会让生成内容产生质变。

网站加速

在之前的文章中，有人反馈网站进不去，加载慢。

最有效的方式就是针对国内访问环境，增加CDN缓存，即将网站内容提前缓存到全国各地的CDN服务器上，用户访问时，从最近的服务器上去获取内容，这样就非常快。

但看了一圈，国内的CDN服务都不算便宜，并且对域名有备案要求，我这个域名在服务器过期之后，备案已经失效了。

因此，只能从其它方式角度考虑，尽可能增加网站加载性能。

CDN依赖优化

网站中，观察网络请求就能发现，有些依赖是通过国外的免费CDN进行加载。

于是让AI帮我替换成了一些在国内访问速度更快的CDN。

依赖自托管

虽然换了CDN，但还是发现这几个依赖datagridxl2(表格转换)、katex(公式渲染)、highlight(代码高亮)、gif(gif压缩)，占用了很多加载时间，至少拖慢了3秒钟。

于是索性采用自托管的方式，直接加载，不走网络请求，这样能明显提速。

使用字体预加载

浏览器默认不会立即加载字体，而是等到 CSS、DOM 都加载了，并且发现某个元素需要该字体时才开始请求。

用户侧的体验就是，界面已经渲染完了，字体突然又刷新了一下。

字体预加载就是在浏览器解析 CSS 之前，字体文件已在下载，字体文件会提早进入 HTTP 缓存，从而提升速度。

Tailwind CSS 优化

原本通过 CDN 去加载 Tailwind，这样必须下载全量 Tailwind（400KB+），包含所有颜色、间距、阴影、响应式类，动态生成 CSS，并且没法缓存，每次刷新页面都要重新编译。

于是借助 PostCSS，本地构建CSS，只生成网站里实际用到的样式，体积从大幅下降，并且该 CSS 是静态的，可缓存，首次加载后瞬间打开。

异步动态加载脚本

网站中用到不少第三方依赖，虽然采用了子托管的方式去降低网络请求延迟，但基本逻辑还是首次访问页面就直接加载完成。

异步动态加载是指只在需要的时候去加载，即切换到对应的功能Tab界面，此时相关脚本才开始加载。这样，又能减少网站初始加载的内容，提升速度。

图片格式优化

WebP 是 Google 推出的图片格式，占用空间会比 png/jpg 小很多。

于是把图片用 cwebp 转换了一下，体积有超50%的减小。

字体格式优化

WOFF2 是 Google 推出的字体格式，和图片格式类似，它会比TTF格式体积小很多。

用 woff2_compress 把 ttf 转成 woff2，体积减少到1/3。

React组件懒加载

React组件懒加载指的是按需加载 React 组件代码，和前面“异步动态加载脚本”有点类似，主要区别是它是作用于组件，而不是外部依赖，这样也能提升页面加载速度。

最终效果对比

经过一系列优化措施后，网速提升的效果还是比较明显的。

优化前：

优化后：

当然，对于上不去github的用户来说，不管怎么优化，还是会访问不了。

如果有云服务厂商来找我合作，提供免费的服务器资源，我会很乐意在网站的角落中，公示赞助商的信息。