Webpackとcode splitting

code splittingはコード分割です.では、コード分割とは何ですか.
例を挙げましょう.
まずパッケージlodashをダウンロードし、コマンドnpm install lodash--saveを使用します.lodashは機能集合であり,多くの機能方法を提供している.
まずsrcディレクトリの下でindex.jsには以下のコードが書きます.以下はindexです.jsの内容.

import _ from 'lodash';

console.log(_.join(["a","b","c"]));

次に、npm run bundleをパッケージします.
梱包が終わったら、ブラウザでhtmlを実行してもいいです.いいですよ.
コードパッケージのmainを開くことができます.js .ビジネスコードとライブラリコードをmainにパッケージします.jsが当たったので、このファイルは特に大きいです.【ブラウザはファイルを並列にロードすることができ、同時に2つのファイルをロードするのは一般的に大きなファイルをロードするよりも速い】
ビジネスコードが特に多い場合、ツールライブラリのコードももちろん多い場合です.
いくつかの問題があります.
-ファイルのパッケージが大きくなり、ロード時間が長くなります.
-ユーザーがページに再アクセスし、大きなファイルをロードする場合(ビジネスロジックコードが変わり、ツールライブラリがほとんど変わりません)
まずindexをjsではlodashの導入について別のファイルに配置する、srcの下に新しいファイルlodashを作成する.js、コードは以下の通りです.

import _ from 'lodash';

window._ = _;

そして、もう一つのページの構成をします.Webpackを開きます.common.js
新しいエントリファイルは以下の通りです.

module.exports = {
	entry: {
		lodash: "./src/lodash.js",
		main: "./src/index.js"
	},
...
}

保存し、npm run bundleをパッケージします.梱包が終わったら使えます.このとき,論理コードとlodashコードが2つのファイルにパッケージ化され,htmlにこの2つのファイルが導入されていることがわかる.