webpack4.29.x成神の道(十五)コード分割(code spliting)上

目次
前節:開発と生産環境の区分
前節の目次は次のとおりです.
コード分割とは
まずsrc/indexを変更します.js:

import _ from 'lodash';

_.join(['a', 'b', 'c', '-']);

ここでlodashを導入しjoinメソッドを呼び出し、lodash:npm i lodashnpm run buildをインストールすると、lodashとビジネスコードがパッケージ化され、70 kbが表示されます.
ここで問題があります.プロジェクトにはサードパーティ製のライブラリが多く導入されています.これらのライブラリは業務に関係なく、内容はほとんど変わりません.パッケージ化すると、ブラウザが効果を見るには大きなmainを実行する必要があります.jsファイルは、変動しないコード(サードパーティでも自分で書いたものでも)を1つのファイルに個別にパッケージ化し、ファイル名が毎回同じであれば、ブラウザ以降のリフレッシュで直接キャッシュに読み取ることができ、ページ性能を向上させる、いわゆるコード分割である.
コード分割を手動で実現
ここでは、コード分割の新しいsrc/js/lodashとは何かをより理解するために、簡単で乱暴な方法を示します.jslodash.jsコードは以下の通りです.

import _ from 'lodash';
window._ = _;

Windowsにプロパティ''を掛けて、値はlodash、index.jsは導入する必要はありません:src/index.js:

_.join(['a', 'b', 'c', '-']);

そしてlodash.jsはエントリ、webpack/webpackに設定.base.js:

//   
entry: {
    main: './src/index.js',
    lodash: './src/js/lodash.js'
  },
//  

npm run buildを実行します.
lodashが単独でファイルにパッケージされていることがわかります.これがコード分割です.
Webpackでコード分割を実現
まずコードを復元し、src/js/lodash.jsは削除しました.src/index.jsは以下の通りです.

import _ from 'lodash';
_.join(['a', 'b', 'c', '-']);

webpack/webpack.base.js lodashエントリを削除する:

//   
entry: './src/index.js',
//  

これでコードが復元され、コード分割の機能もなくなります.
次に、本番環境の構成を変更する、コード分割のオプションwebpack/webpackをオンにする.prod.js:

//   
module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin()
  ],
  optimization: {
    //       
    splitChunks: {
      //        ：all（  ）, async(  ，       ), and initial
      chunks: 'all'
    }
  }
});

そしてnpm run build:
次のセクション:コード分割(code spliting)