@
在看到vite的文档之前，我一直都念/vait/，直到看到文档的第一行写，它念/vit/，仿佛在此之前所有提及它的场合都社死了。
现在就是非常后悔。
我看到它，也许源于invite的vite发音，就想当然带入进去，也没有验证（我能想过vite根本不是英语吗？当然不可能啊），甚至这么久都没有读过它的文档…（为什么？）
@
用两天时间把大部分内容都迁移了，包括此前引入的所有的ThreeJs部分的依赖都入乡随俗改成ESModule版本，然后使用less让css简洁很多。
我意识到我在第三代vue里使用了大批量的毫无进步的二代代码——因为博客项目本身并不大，而且为了严格的外观要求，里面的静态内容居多，setup api并没有非同寻常的用武之地。同时，我在使用typescript时也有许多不成熟的困惑。
比如这个瀑布流：
我想在迁移的时候给它做个工具，能动态添加图片的，interface写完了我意识到不能这样做，因为我要保证这个瀑布流模块的各个图片的主体颜色之间是有安排的好看的，那么按照高度添加图片进去的传统的瀑布流模式就没有办法做到这一点；真要做这个需求，有一个思路，可以先计算每个图片的主题色，然后统计当前已添加图片与待添加图片之间的色彩距离，在待插入的四个位置中取差值最大的添加进去来保证屏幕上的每一块在视觉上的颜色不那么重复堆叠。
/*
事实上这样的色彩距离怎样界定？
就主题色的一般计算结果而言，八叉树算法计算出的图片色彩预览偏灰，而中位切分计算出的色卡更适合这种鲜明的比较：
此处总结图像主题色提取算法：
https://blog.csdn.net/shanglianlm/article/details/50051269
https://xcoder.in/2014/09/17/theme-color-extract
那么得到中位切分的色链之后如何合理计算综合的色彩差值？每一列如何进行初始化？列初始化是否计算其后效性？如果计算那么像这样的色彩阵列的最优解应该如何界定？如果不计算后效性，按照给定顺序向每一列中添加图片时，如何界定空列的影响？
而为了保证在平面上视觉效果的稳定，色差的计算应当是二维的：上下左右的每一张图片都应该被计算，并且其影响应当按照与新增图片的物理位置的远近加权。那么如此计算时，每一列的第一张图片的选取就成为了不得不考虑的问题，因为它们必须要有足够的相异性。
那么说到这里，我的卑微已经尽数体现了——这些问题在我系统学习相关知识之前，是无法被科学地解决的。
以上种种导致了现在的瀑布流是静态的。
*/
@
小小后记：先前被问到为什么博客这么卡，十几秒才进去，我一直以为是我写的Js太拉和3d建模太大难加载，迁移之前跑了一趟Lighthouse，发现所有的时间都源于图片太大——几十张图，基本上都是100k到1M左右。一次性加载所有的图片是非常不合理的，因此预加载和懒加载非常有必要。
因此瀑布流的懒加载也就引申到了之前说的图片的主题色提取的问题，类似于pexel等网站，对图片使用主题色预览与分类，所以去看的相关算法。结论是预览主题色使用八叉树算法效果较好，并且我应该去调库而不是自己写一遍，因为人家有c++优化。
@
打包结束后，发现有500k以上的js文件，在想能不能测试覆盖率然后优化一下。
@
部署到Gitee，空白页
Uncaught ReferenceError: process is not defined。
我找了很多node的process相关内容。
我突然想起，github page 是部署静态页面的，不能跑node。
只可惜我后知后觉意识到这件事的时候，我已经因为这个报错坐牢一下午了。
我不只需要一个服务器——事情回到两年前的这样的时刻，我没有当地户口，办不来域名。
@
想到好久好久以前，刚开始做博客用hexo，那时候大一刚刚摸到电脑，对git和node都完全没有概念，所以hexo是我的github上面的古早的第一个项目。
@
nuxt好像有ssg静态页，继续试试。
（事实上在此之前还试过vitepress了，但是感觉差太远了）
ReferenceError: document is not defined。
使用ssr服务器渲染模式，需要在node上模拟dom。
可能这两趟之后，我对JS运行的浏览器环境和Node环境终于留下了不可磨灭的印象。
@
现在是周五晚上。
我意识到不能只想着怎么解决报错，因为有一些致命的问题。
我用jsdom模拟了node里的dom环境，赋给了Threejs，比对了生成的document对象之类种种。
我就没有想过，WebGL本身是跑在浏览器上的。
@
现阶段没有想到可行的方法，我甚至在想用nuxt把vue打包ssg静态页之后再混入threejs的部分递给浏览器。
此事再议。
感觉这一周就除了vite快乐了几天以外一直在跑环境，尝试各种办法去解决各种问题。
vite版本的阶段性成果：
