loadable-components

何回も聞いたことあるCode Splittingについて概要を調べてみた 以下の記事をみてちゃんと理解したい qiita.com 要はその名の通り「コードを分割すること」みたい 初期表示時には不必要なコードを分割しておき、アプリケーションのペイロードサイズが削減することで、アプリケーションの読み込みが高速化されるよねというもの 分割した残りのコードはユーザが必要な時に「遅延読み込み」を使って動的にロードする 「遅延読み込み」は主に、Dynamic Importの構文を使うようで、現在はWebpackやBrowserifyなどのバンドラーを使うか、ReactだとLoadable Componen…

Next.jsやGatsbyを利用していると、特定のライブラリを利用するタイミングで ReferenceError: window is not defined というエラーが発生します。 これはエラーの通り、windowが定義されてないという意味で、タイミングとしてはサーバーサイドでのビルド時に発生しています。 （ライブラリと絞っていますが、自身のコードでwindowに依存している場合でも発生します） 解決するにはサーバーサイドレンダリング中に処理をさせないよう工夫するしかないのですが、回避方法がいくつかあります。 Reactコンポーネントとして利用できるライブラリの場合 loadable-…

はじめに 私はよくReactをSSRする際にはNext.jsを用いて開発することが殆どです。その弊害?なのか、SSRの仕組みを自分で実装したことがないため必要最低限の機能を持つサーバーを実装してみました。 作成したサンプルについて サンプルはこちらになります github.com 目指した部分 SSRサーバを作成するにあたって以下の機能を実装しました @loadable/componentを利用してパフォーマンスに注力したい 開発時にはHMRでリアルタイムでブラウザに反映されるようにしたい 上記を実装するにあたってこちらを参考にしました。 loadable-components.com git…

loadable-componentsというワードを聞いて知らなかったので調査した loadable-components.com 何かというと Reactコード分割ライブラリ React.lazyに代わるものではありません Reactチームが推奨するソリューション どんな特徴があるかというと Library Splitting prefetch SSR full dynamic import Code Splittingをいい感じにしてくれるライブラリらしい 導入は簡単 npm install @loadable/component import loadable from '@loadab…