highlight.js와 cheerio의 번들 크기를 줄일 때 비망록

이 기사는 highlight.js 과 cheerio 를 사용했을 때 バンドルサイズ 가 생각했던 것보다 부풀어 오르고, 다이어트 시켰을 때의 비망록.

부풀어 오른 원인 그 1

highlight.js 를 그대로 import하고 있었다.

import hljs from 'highlight.js'; 
...

이 경우, highlight.js가 대응하는 각 언어의 모듈이 모두 임포트되어 버린다.

대응

특정 언어만 기술・하이라이트 하면 되므로, 틈새 언어의 모듈은 번들 대상외가 되도록 필요한 언어분만 임포트시켜 간다.

다음은 예로서 Javascript 만 모듈을 임포트했을 때의 코드.

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';

hljs.registerLanguage('javascript', javascript);

이하, 특정 언어(15종류 정도)만 임포트했을 때의, 번들 사이즈를 대응전과 비교한 리포트.


-
대응 전
대응 후
차이


size(Gzipped)
265.84kb
133.91kb
-131.93kb

분석


-

참고 기사

htps : // bg. 미쓰루오 g.んふぉ/2017/12/ほwーーーーーーーーーーーーー

h tps://b 쟈코베 l. m/2016/12/04

부풀어 오른 원인 그 2

cheerio 사용하여 강조 표시를 추출했습니다

마크다운 형식의 html 정보에서 코드 부분을 추출하기 위해 다음과 같이 cherrio 를 사용하여 html 요소를 다시 쓰는 구현을 하고 있었다.

const $ = cheerio.load(article.body);
$('pre code').each((_, elm) => {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass('hljs');
});

body = $.html();

대응

highlight.js 의 기능인 initHighlighting() 를 클라이언트측에서 html의 렌더링시에, 실행되어 두면 cherrio 를 사용할 필요가 없었다.

그 때문에, 이쪽은 삭감이라고 하기보다 cherrio 마다 삭제해 대응했다.

initHighlighting( )은 페이지의 모든

 블록을 강조하는 기능입니다.
 참고 기사
 htps : // 미 c로 cms. 이오 / b / g / sy x x hi gh gh chin g - 온 - r ゔ ぇ r - / 
 htps // 언제.んふぉ/bぉg/5あ9ふぇ5え3あ b60b20097あ bdb7d