どうも kitamago です。 今回は <a href="https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer" target="_blank" rel="noopener noreferrer">@next/bundle-analyzer</a>&nbsp;でビルド時に生成されたJSファイルのバンドル情報を可視化した際に、 highlight.js のバンドルサイズがなかなか大きく、 改善できればパフォーマンス向上に繋がるなと思い highlight.js のバンドルサイズ削減を行った際のメモです。 <h2 id="hd767323906">どのくらいバンドルサイズが大きいのか</h2> 実際に <code>@next/bundle-analyzer</code> を用いて、調べたところ以下のような結果となった。 赤い部分が highlight.js のバンドルサイズを占めているがサイズはなんと、287KB(Gzipped)。 これは最適化できると、かなりパフォーマンスの改善が期待できそう。

<h2 id="he9a56c1ae0">最適化を行う</h2> <a style="background-color:#ffffff" href="https://highlightjs.org/usage/#:~:text=%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A7%E3%81%AF%E3%80%81%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E8%A8%80%E8%AA%9E%E3%81%8C%E7%99%BB%E9%8C%B2%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82" target="_blank" rel="noopener noreferrer">How to use highlight.js</a> highlight.jsドキュメント(上記リンク)より、 デフォルトインポートだと全ての言語が登録されてしまう為、使用する言語のみのインポートを推奨しています。 <pre><code>import hljs from 'highlight.js';</code></pre> そのためライブラリだけをインポートして、必要な言語だけを登録していきます。 今回はテストとして JavaScript と TypeScript のみを登録します。 (愚直ですが、公式でも推奨するやり方だから仕方ない、、) <pre><code>import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/atom-one-dark.css';

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

import typescript from 'highlight.js/lib/languages/typescript';

import css from 'highlight.js/lib/languages/css';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('css', css);

// 使う箇所が多い場合は、外部モジュールとして切り出すと便利
export default hljs;</code></pre> <h2 id="h86c1eb6dfa">注意点</h2> 自分は公式ドキュメントを参考に作業を進めたので、詰まる点はあまりありませんでしたが 以下のようにインポートしている記事をネットで見かけました。 <pre><code>import hljs from "highlight.js/lib/highlight"</code></pre> &nbsp;この場合だと、<code>/lib/highlight</code> には定義が存在しない為、型定義ファイルが存在しないと叱られます。 どうしてもこのやり方でインポートしたい場合は、<code>@ts-ignore</code> を付けるか、<code>require</code> でインポートするか、型定義ファイルを作成すれば良いですね。 (ライブラリ外の定義を使う際に使用することがあるみたいです。) <h2 id="hb6509f48bf">結果</h2> 必要な言語のみをインポートするように変更した結果、 highlight.jsが占めるバンドルサイズが 10.13KB とかなり小さくなった事がわかりますね。

syntax highlightライブラリである highlight.js のバンドルサイズが大きかったのでパフォーマンス向上の為、バンドルサイズを最適化した際の備忘録

highlight.jsのバンドルサイズを最適化する

<h2 id="h0054166709">Hello World!!</h2> 皆様初めまして、kitamago と申します。 今年度からフロントエンドエンジニアとしてデビューしたひよっ子です。 詳しいプロフィールに関しては近日投稿予定です。 就職活動中にもポートフォリオサイトを Gatsby.js で作っていましたが、 「実務を通して技術情報をアウトプットとして発信したい！」と思い立ったので 勉強がてらにブログを作ってみました。 <h2 id="h120613a0b8">ブログ構成図 ( 技術構成 )</h2> 本ブログの構成図 (概略) は下図のようになっています。

また、要件定義としては以下の通りになります。 • サイトマップ • 記事一覧取得 • カテゴリ別記事の取得 • 最新の記事取得 • 詳細記事の取得 • 関連記事の取得 (投稿済み記事ページのリンクをリッチに埋め込む) • 人気記事の取得 • 目次 • ページ内検索 • PWA (追加実施予定) • プレビュー機能 (追加実施予定) <h2 id="h61e491e306">MicroCMS APIスキーマ設定</h2> <h3 id="h6cfaa47bdb">ブログ</h3>endpoint: blog type: リスト形式

<h3 id="h981d1ce405">タグ</h3>endpoint: tag type: リスト形式

<h3 id="h7a7fc3416d">人気記事</h3>endpoint: popular type: オブジェクト形式

<h2 id="h7dabb5418b">今後の展望</h2> 実務を通して学んだこと、躓いた等を不定期ながら更新できたらと思います。 ではでは。

「実務を通して技術情報をアウトプットとして発信したい！」との想いから  Next.js × MicroCMS で Jamstack なブログを作ってみました。

[Next.js × microCMS] JamStackなブログを設立しました

<pre><code>import Link from 'next/link'

export default function FirstPost() {
 return (
 &lt;&gt;
 &lt;h1&gt;First Post&lt;/h1&gt;
 &lt;h2&gt;
 &lt;Link href="/"&gt;
 &lt;a&gt;Back to home&lt;/a&gt;
 &lt;/Link&gt;
 &lt;/h2&gt;
 &lt;/&gt;
 )
}</code></pre>

kitamago-log

New Arciles

highlight.jsのバンドルサイズを最適化する

[Next.js × microCMS] JamStackなブログを設立しました

[Next.js microCMS] JamStackなブログを作る！ #2

[Next.js microCMS] JamStackなブログを作る！ #2

[Next.js microCMS] JamStackなブログを作る！ #2

[Next.js microCMS] JamStackなブログを作る！ #2