---
layout: post
title: 初一大吉，博客上上新
date: 2024-02-11 5:35:06 +0800
category: tech
thumb: IMG_PATH/update.jpg
tags: [webpack, js, 分包, update]
---

## 图片预览

`
    
    var preview = document.getElementById("preview");
    var previewImage = document.getElementById("previewImage");
    
    var previewImageTitle = <figcaption class="previewImageTitle"> + image.title[i] + </figcaption>;
    previewImage.setAttribute('src', image.url[i]);
    preview.style.display = 'flex';

    var previousPreviewImageTitle = document.querySelector('.previewImageTitle');
    if (previousPreviewImageTitle) {
        previousPreviewImageTitle.parentNode.removeChild(previousPreviewImageTitle);
    }
    previewImage.insertAdjacentHTML('afterend', previewImageTitle);

    preview.addEventListener("click", function() {
        this.style.display = 'none';
    });

`

markdown太丧心病狂了，js的代码块在转换的过程中给我生效了，大多方法都不能阻止这段代码不生效，把代码删删减减让我足足花了5分钟去注释这段代码.....

![点开试试][p1]

前几天Fooleap留言建议我用cn-font-split把字体做一下分包处理，分包后原18M变1M不到，一篇千文的文章才几百KB，加载速度没得说。

![cn-font-split 分包后的效果][p2]

```webpack
Haibao@DESKTOP-IB7LLPB MINGW64 /d/lhasa.github.io (master)
$ bundle exec npm run build

> fooleap@1.0.0 build D:\lhasa.github.io
> webpack -p && jekyll b

Hash: 470f4b7c37655d2798f9
Version: webpack 4.47.0
Time: 2347ms
Built at: 2024/02/11 上午5:27:39
       Asset      Size  Chunks             Chunk Names
main.min.css  27.2 KiB       0  [emitted]  main
 main.min.js   156 KiB       0  [emitted]  main
[0] ./src/main.js 25.7 KiB {0} [built]
[3] ./src/sass/main.scss 39 bytes {0} [built]
    + 3 hidden modules
Configuration file: D:/lhasa.github.io/_config.yml
To use retry middleware with Faraday v2.0+, install `faraday-retry` gem
            Source: D:/lhasa.github.io
       Destination: D:/lhasa.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 7.403 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
```

这些天我把webPack临时学了一手，也是半斤八两，普通打个包是没问题，就是不知道这分包后的字体能不能用webPack打包，我还没试过。

因为网站在Github pages，这加载速度也快到顶了。目前还缺少一个已备案的域名，我想把腾讯云的COS用CDN来加速一下，这样的话静态资源应该会更快点，博客也没啥访问量，按流量计费，也花不了几个钱。


## 2024/2/14 更新
后来注意到URL包含了腾讯图片处理样式后缀，这里用正则做一下处理

```javascript
image.url[i] = image.url[i].replace(/\.(jpg|jpeg|png|gif)[^/]*$/, '.$1');
```


[p1]: https://cos.lhasa.icu/assets/article/MountTaranaki-NewZealand.jpg
[p2]: https://cos.lhasa.icu/assets/article/cn-font-splitfenbao.png