jekyll 속도 올리기
개인 블로그로 github pages와 jekyll을 사용하고 나서부터 로컬에서 jekyll을 돌리면서 포스트가 제대로 작성되었는지 푸쉬하기 전 매번 확인하고 있다. 보통 나는 포스트를 _drafts 폴더에 우선 넣어놓고 작성하는 편이라, 드래프트까지 빌드하면서 확인하고 있었는데, 한번 저장하면 다시 빌드될때까지 너무 오래걸린다. (12인치 맥북에서 2초정도 걸린다) 그래서 이걸 어떻게 더 빠르게 만들 방법이 없을까 하면서 찾아보다가 아래처럼 로컬 테스트 단계의 속도를 올렸다. (푸쉬되고 난 후야.. 뭐 내 서버 아니니까..)
config.yml 수정
.git/ 폴더의 경우 상당히 많은 파일들을 포함하는데 tree .git을 해보니 아래처럼 나온다.
$ tree .git
...
...
├── remotes
│ └── origin
│ └── master
└── tags
267 directories, 799 files
약 800개의 파일과 270개의 폴더가 존재하는데, 이를 일일히 다 탐색하는 것은, 코어 M에서 돌아가는 핫 리로더에게는 너무 버거운 작업일테니 exclude에 다음처럼 추가시켜주었다.
exclude:
- Gemfile
- Gemfile.lock
- LICENSE
- README.md
- .vscode
- .git
- .gitignore
- .DS_Store
좀 다른 필요없는 파일까지 다 합쳤다. 이렇게 하니까 jekyll serve를 실행할 때 리로드 속도가 평균적으로 0.2초 정도..? 빨리진 느낌이다. (대략 2.0초에서 1.8초정도까지 줄었다)
렌더링 하는데 오래걸리는 파일 수정
jekyll 속도 이슈로 찾다보니 jekyll에서 프로파일링 옵션을 제공하는 것을 알게되었다. 다음처럼 실행하면 된다.
Configuration file: {github repo 경로!!}/jeongukjae.github.io/_config.yml
Source: {github repo 경로!!}/jeongukjae.github.io
Destination: {github repo 경로!!}/jeongukjae.github.io/_site
Incremental build: disabled. Enable with --incremental
Generating...
Jekyll Feed: Generating feed for posts
Filename | Count | Bytes | Time
-----------------------------------------------+-------+---------+------
_layouts/default.html | 57 | 775.53K | 0.214
_includes/meta.html | 57 | 54.90K | 0.093
feed.xml | 1 | 123.26K | 0.083
sitemap.xml | 1 | 8.51K | 0.062
_includes/svg-icons.html | 57 | 20.87K | 0.052
tags.html | 1 | 33.85K | 0.049
_layouts/post.html | 49 | 541.59K | 0.029
_includes/analytics.html | 57 | 0.06K | 0.018
_posts/2018/2018-11-13-CNN 공부.md | 1 | 8.04K | 0.006
index.html | 1 | 10.08K | 0.006
page2/index.html | 1 | 11.61K | 0.004
about.md | 1 | 0.83K | 0.004
_includes/image.html | 12 | 4.28K | 0.004
...
...
done in 2.226 seconds.
Auto-regeneration: disabled. Use --watch to enable.
이렇게 쭉 나오는데, tags.html의 경우는 많이 줄인거다. 원래 0.150정도를 잡아먹고 있었다.. ㅠㅠ 모든 포스트를 태그 수 + 1만큼 순회하는데, liquid의 기능이 부족한건지 내가 못찾는건지 많이는 못줄이고 어떤 태그가 있는지 찾아오는 부분만 줄였다. 문서를 찾아보니 아래처럼 모든 태그를 중복제거하면서 정렬해서 이렇게 들고 올 수 있더라.
{% assign all_tags = site.posts | map: 'tags' | compact | uniq | sort %}
이렇게 사용하니까 약간.. 더 줄었다. 매 리로드마다 1.7 ~ 1.8초정도 걸린다. 근데 이게 그래도 많이 느리다.
incremental serve
jekyll 문서에 incremental regeneration에 관한 문서가 있다. 아직 experimental feature이긴 하지만, 뭐 별 문제 없으면 개인용으로 사용할만 하다고 생각해서 적용해보았다. 적용해보니 live reload, drafts 빌드까지 합쳤을 때 0.7초까지 줄어든다.. ㅠㅠㅠㅠㅠ 뭐 1초 가까이 줄어든 셈이다.
limit posts
그리고 한개의 포스트만 빌드하도록 설정이 가능하다. 어차피 작성시에는 하나의 포스트만 보니까 설정하면 좋을 듯하다.
$ jekyll serve --help
...
...
-s, --source SOURCE Custom source directory
--future Publishes posts with a future date
--limit_posts MAX_POSTS Limits the number of posts to parse and publish
-w, --[no-]watch Watch for changes and rebuild
...
...
이렇게 중간에 limit-posts 옵션이 있다. 1로 설정해서 사용하자! 이렇게 쓰니까 초기 로딩은 조금 느렸는데 (2초) 초기로딩까지 0.6초정도로 엄청 빨라졌다!! 게다가 라이브 라로드는 0.3초정도로 거의 수정사항을 바로 확인할 수 있게 빨라졌다.
그래서 이렇게 쓰는 중이다
$ jekyll serve -lDI --limit-posts 1
Configuration file: {github repo 링크입니다!!}/jeongukjae.github.io/_config.yml
Source: {github repo 링크입니다!!}/jeongukjae.github.io
Destination: {github repo 링크입니다!!}/jeongukjae.github.io/_site
Incremental build: enabled
Generating...
Jekyll Feed: Generating feed for posts
done in 0.657 seconds.
Auto-regeneration: enabled for '{github repo 링크입니다!!}/jeongukjae.github.io'
LiveReload address: http://127.0.0.1:35729
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
Regenerating: 1 file(s) changed at 2019-04-07 14:25:31
_posts/2019/2019-04-07-jekyll-속도-올리기.md
Jekyll Feed: Generating feed for posts
...done in 0.363427 seconds.
저장하고 브라우저 올리면 리로드가 끝나 있을 정도이다. 대략 초기로딩도 2.5초정도에서 0.6 ~ 0.7초까지 줄었고, 라이브 리로드도 2초에서 0.3 ~ 0.4초까지 줄었다. 이제 앞으로 편하게 블로그 글 작성합시다 🤗