webpack 4シリーズ教程(六):Splitchunks Pluginを使ってコードを分割します.

1. Splity Chunks Pluginの概念
最初はchunksと彼らを導入したモジュールはwebpack内部の親子関係図で接続されていたが、webpack 3ではCommons ChunkPluginによって彼らの間の依存の重複を回避した.webpack 4でCommons ChunkPluginが取り外され、代わりにoptimization.splitionsとoptimization.runtime Chunkの構成項目が示されています.
デフォルトでは、Splitychunks Pluginはロードしたいコードブロックだけに影響します.初期ブロックの変更はHTMLファイルに含まれるスクリプトタグに影響を与えてプロジェクトを実行します.
webpackは、コードブロックを以下の条件に従って自動的に分割します.

は共有されるコードブロックまたはnode_mudulesフォルダ内のコードブロック

体積が30 KBより大きいコードブロック(gz圧縮前)

コードブロックをロードしたい場合の並列要求数は5つの

を超えない.

初期ページの読み込み時の並列要求数は3つの

を超えない.
例1:

// index.js

//      a.js
import('./a')

// a.js
import 'vue'

// ...

パッケージ化の結果、vueを含む独立コードブロックが作成されます.a.jsを含む元コードブロックが呼び出されたとき、この独立コードブロックは並行して要求されます.
 理由:

vueはnode_から来ています.modulesフォルダ

vueの体積は30 KB

を超えます.

呼び出し時の並列要求数は2

である.

は、ページ初期ローディングに影響しない

私達がこのようにした理由は、vueコードはあなたの業務コードのように頻繁に変動していません.単独で抽出すれば、あなたの業務コードと分けてキャッシュされ、大幅に効率が上がります.
例2:

// entry.js

import("./a");
import("./b");

// a.js
import "./helpers"; // helpers is 40kb in size

// ...

// b.js
import "./helpers";
import "./more-helpers"; // more-helpers is also 40kb in size

// ...

結果:./helpersのすべての依存項を含む個々のブロックが作成される.起動時にこのブロックは元のブロックと並行してロードされます.
理由:

条件1:helpersは共有ブロック

である.

条件2:helpersは30 kb

より大きい.

条件3:導入呼び出しの並列要求数は2

である.

条件4:初期ページローディングに影響しない場合の要求

2. Splitychunks Pluginのデフォルトの設定
以下はスプリットChunks Pluginのデフォルトの設定です.

splitChunks: {
    chunks: "async",
    minSize: 30000, //        
    minChunks: 1, //           
    maxAsyncRequests: 5, //             
    maxInitialRequests: 3, //            
    automaticNameDelimiter: '~', //        
    name: true,
    cacheGroups: { //    
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

キャッシュグループ:
キャッシュグループは、Splity Pluginの中で一番面白い機能です.デフォルト設定では、node_をmudulesフォルダのモジュールをセブンドッズというbundleにパッケージ化しました.すべての参照が2回以上のモジュールに割り当てられました.  default bundle中です.もっと通ります 優先度を設定します.
chunks:
chunks属性は、どのコードブロックを分割するかを選択します.オプション値は、'all'(すべてのコードブロック)、'async'(必要に応じてロードされるコードブロック)、'initial'(初期化コードブロック)です.
3.プロジェクトにスプリットChunks Pluginを追加する
プレゼンテーションを簡単にするために、まず二つの種類のライブラリをインストールします.

npm i lodash axios -S

main.jsを修正して、lodashとaxiosを導入して、相応の方法を呼び出します.

import Modal from './components/modal/modal'
import './assets/style/common.less'
import _ from 'lodash'
import axios from 'axios'
const App = function () {
  let div = document.createElement('div')
  div.setAttribute('id', 'app')
  document.body.appendChild(div)
  let dom = document.getElementById('app')
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: '  ',
    content: '  ',
    footer: '  '
  })
}
const app = new App()
console.log(_.camelCase('Foo Bar'))
axios.get('aaa')

SplityChunks Pluginを使用するには、何の依存もインストールする必要はありません.webpack.nfig.jsのconfigオブジェクトにoptimization属性を追加するだけでいいです.

optimization: {
    splitChunks: {
      chunks: 'initial',
      automaticNameDelimiter: '.',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: 1
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `manifest.${entrypoint.name}`
    }
  }

runtime Chunkを設定すると、各入り口にruntimeだけを含む追加のコードブロックを追加します.nameの値は文字列でもいいですが、このようにして各入り口に同じruntimeを追加して、関数として設定すると、現在のentryオブジェクトに戻って、入り口に分けて異なるruntimeを設定することができます.
もう一つ取り付けましょう. webpack-bundle-analzerは、パッケージ化された各bundleに依存するモジュールを明確に示します.

npm i webpack-bundle-analyzer -D

インポート:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

を使用して、plugins配列に追加すればいいです.

new BundleAnalyzerPlugin()

包装後:
​
​
各モジュールの依存がはっきりと見えます.dist/index.を開けば、私達のコードが順調に運行されていることが分かります.
​
以上、Splitychunks Pluginの基本的な使い方です.より多くの高級な配置は、研究を続けられます.