🔪

webpackで遅延読み込みを使って大きなファイルを小分けにする方法

2022/04/27に公開

JavaScript

webpack

tech

この記事について

この記事では webpack の遅延読み込みを使って大きなファイルを小分けにして実行時に動的に読み込む方法について紹介します。

おおまかな手順

おおまかな手順を下記に示します。

コーディング
動作確認

ソースコードについてはこの記事のGistページからダウンロード可能です。

コーディング

下記のコマンドを実行してコーディングの準備をします。

mkdir webpack-devtool-disable
cd webpack-devtool-disable
npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server
touch app.js page1.js page2.js webpack.config.js

app.js

エディタでapp.jsを開いて下記の内容を入力します。

ポイントを下記に示します。

URLのpathnameがpage1である時にimport関数を使って./page1.jsを読み込んでいます。import関数の呼び出しのカッコ内にwebpackChunkNameを含むコメントを書くことでビルド時に出力されるファイル名を指定することができます。
URLのpathnameがpage2である時にimport関数を使って./page2.jsを読み込んでいます。

page1.js

エディタでpage1.jsを開いて下記の内容を入力します。

page2.js

エディタでpage2.jsを開いて下記の内容を入力します。

webpack.config.js

エディタでwebpack.config.jsを開いて下記の内容を入力します。

動作確認

ターミナルで下記のコマンドを実行してwebpack-dev-serverを起動します。

webpack serve

ブラウザで http://localhost:8080/js/app.js にアクセスして下記の内容が含まれていることを確認します。

js/app.js

/*!****************!*\
  !*** ./app.js ***!
  \****************/
async function main () {
  try {
    if (window.location.pathname === '/page1') { // <1>
      await __webpack_require__.e(/*! import() | pages/page-one */ "pages/page-one").then(__webpack_require__.t.bind(__webpack_require__, /*! ./page1.js */ "./page1.js", 23))
    } else if (window.location.pathname === '/page2') { // <2>
      await __webpack_require__.e(/*! import() | pages/page-two */ "pages/page-two").then(__webpack_require__.t.bind(__webpack_require__, /*! ./page2.js */ "./page2.js", 23))
    }
  } catch (err) {
    console.error(err)
  }
}

main()

続いてブラウザで http://localhost:8080/js/pages/page-one.app.js にアクセスして下記の内容と同じであることを確認します。

js/pages/page-one.app.js

(self["webpackChunkwebpack_lazy_loading"] = self["webpackChunkwebpack_lazy_loading"] || []).push([["pages/page-one"],{

/***/ "./page1.js":
/*!******************!*\
  !*** ./page1.js ***!
  \******************/
/***/ (() => {

console.log('This is page 1')

/***/ })

}]);

続いてブラウザで http://localhost:8080/js/pages/page-two.app.js にアクセスして下記の内容と同じであることを確認します。

js/pages/page-two.app.js

(self["webpackChunkwebpack_lazy_loading"] = self["webpackChunkwebpack_lazy_loading"] || []).push([["pages/page-two"],{

/***/ "./page2.js":
/*!******************!*\
  !*** ./page2.js ***!
  \******************/
/***/ (() => {

console.log('This is page 2')

/***/ })

}]);

参考にしたWebページ

この記事を作成するために参考にしたWebページを下記に示します。

Lazy Loading | webpack

おわりに

WebページによってはwebpackのJavaScriptコードの大部分を必要としないことはよくあるので、そのような場合はこの記事で紹介した方法を使うことで必要としないコードの読み込みを省略して高速化を図ることができます。この記事がwebpackのJavaScriptコードが大きくなりすぎて困っている方の助けになれば幸いです。最後までお読みいただきありがとうございました。

GitHubで編集を提案