こんにちは。front-end developerのyossyです。
今回はwebpackのオプションexternalsについて話したいと思います。externalsはwebpackで出力するバンドルから依存関係を除外する方法を提供します。どういう事かと言いますとexternalsで定義したライブラリは、importで参照してるvendor系のサイズの大きいライブラリをwebpackでビルドして生成される(〜.js)に含めないといったができます。
以下は設定時の例です。インポートされた特定のパッケージのバンドルを防ぎ、実行時にこれらの外部依存関係を取得します。
index.html
|
<script crossorigin src=”https://unpkg.com/react@16/umd/react.production.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js”></script> |
webpack.config.js
|
externals: { // String react: ‘react’, // Object lodash : { commonjs: ‘lodash’, amd: ‘lodash’,} }, |
これにより、依存モジュールは変更されずに残ります。つまり、以下に示すコードは引き続き機能します。
| import _ from ‘lodash’;
import React from ‘react’; |
プロジェクトでフロントのコードのビルドが遅いなど高速化を目指したいプロジェクトでぜひ試してみてください。
入会申込
ログイン
