TypeScriptのベストプラクティスを見てみようの第１０弾です。今回が最終回です。
46.Lazy-Loading
Lazy-Loading（遅延ロード）は、アプリケーションの初期ロード時間を短縮するために、必要になるまでコードの読み込みを遅らせる手法です。これにより、初期バンドルサイズを小さく抑えることができます。
// LazyComponent.tsx import React, { lazy, Suspense } from 'react'; const LazyComponent = lazy(() => import('./MyComponent')); const App = () => { return ( <div> <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> </div> ); }; export default App;
この例では、MyComponentは初期ロード時には読み込まれません。代わりに、Suspenseコンポーネントによってラップされ、必要になった時点で遅延ロードされます。
Lazy-Loadingを使うことで、必要になるまでコードやデータのロードを遅らせることができ、アプリケーションの初期ロード時間を短縮し、UXの向上が期待できます。
47.ファイルの圧縮
ファイルの圧縮は、主にウェブアプリケーションで使用される静的ファイルに適用されます。JavaScriptやCSSなどのテキストベースのファイルを圧縮することで、ファイルサイズを削減し、ページの読み込み速度を向上させることができます。
ファイル圧縮には、以下のようなメリットがあります。
- ファイルサイズの削減
- ページの読み込み速度の向上
- サーバーの負荷軽減 ファイル圧縮は、ビルド時、サーバーサイドでの動的圧縮、手動での圧縮など、様々な場面で実行されます。
ビルド時の圧縮では、ビルドツールやタスクランナー（例: webpack、Gulp、Grunt）を使用して、自動的にファイル圧縮を適用することが一般的です。
48. コードの最小化
これはよくバンドルと言われるコードのファイルサイズを最小化する手法です。Webpackなどのツールが代表的です。大量のコードを１つの.jsファイルにまとめるので読み込み時間を短縮できます。
49. Google LightHouseの使用
簡単にいうとウェブページの品質を総合的に評価できるツールです。。パフォーマンス、アクセシビリティ、PWA、SEOなどの診断結果がスコアで表示されますし、改善点も教えてくれるので重宝されています。Google Chromeの検証ツール内で使用できます。
50. Web Workersの使用
時間のかかる処理を実行する際には、Web Workersの使用がおすすめされています。スクリプトをバックグラウンドで実行できるので、UXを妨げることなく、複雑な計算を行えるそう。サーバーサイドでTypeScriptを使うケースでは使用するかもですが、フロントエンドで使っている場合はこういった処理はサーバーにまかすのがベターかなと思います。
まとめ
10回に分けてみてきましたが、なかなかの量でまとめるのが大変でした。すでに1回目の内容は忘れていたりしますが、こういったベストプラクティスを抑えておくと今後に生きてくると思うので、度々見返したいと思います。
