こんにちは。front-end developerのyossyです。

今回はwebpackのオプションexternalsについて話したいと思います。externalsはwebpackで出力するバンドルから依存関係を除外する方法を提供します。どういう事かと言いますとexternalsで定義したライブラリは、importで参照してるvendor系のサイズの大きいライブラリをwebpackでビルドして生成される(〜.js)に含めないといったができます。

• どのようなプロジェクトに導入すべきか

1. ビルドの高速化を目指しているプロジェクト
2. jquery, vue, react, その他サイズの大きいライブラリを使用しているプロジェクト
3. 全てのページ共通でライブラリは使用しないが一部のページでは使用したく、バンドル には含めたくないプロジェクト

以下は設定時の例です。インポートされた特定のパッケージのバンドルを防ぎ、実行時にこれらの外部依存関係を取得します。

index.html

webpack.config.js

これにより、依存モジュールは変更されずに残ります。つまり、以下に示すコードは引き続き機能します。

プロジェクトでフロントのコードのビルドが遅いなど高速化を目指したいプロジェクトでぜひ試してみてください。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

yossy

最新記事 by yossy (全て見る)

• ECMAScriptについて - 2019年3月31日
• webpackでvendor系ライブラリ等をbundleから外す設定 - 2019年2月26日