Webpack4 splitChunks構成、ディスクリートロジックコード

ブログを書くこととき知らない、突然ブログを書くためにどのように任意の、年間の過去の半分を感じていない、下書きに仕上がっていません。仕上がりの書き込み、始まりと終わり

1.コードのアップグレード

元のアイテムコード分離は、[名前]が生成さ.router.jsxファイルJSの名前に応じて、プラグイン・バンドル・ローダ、以下の構成のrouter.jsx構成によって分離コードに基づいています。

        { 
            試験： /\.router\.jsx/ 、
            ローダ：[
                 '束ローダ= [1]＆正規表現=（[^ \\\\\\ /] *）\\ルータ\\ JSX怠惰＆名前？' 、
                 'バベル・ローダー'は、
            ]、
            除外する： / node_modules |資産/ 
        }

アップグレードプログラム反応-ロード可能+インポート・モードを使用して、アセンブリコードの分離ユニットで、それが一緒にパッケージされる必要がある、webpackChunkNameは同じライン名に配置されました。

    成分：ロード可能（{ 
        ローダ：（） =>インポート（/ * webpackChunkName： "名前" * / 'MODULES /コンポーネント/ index.jsx' ）、
        ローディング
    }）、

　　2.実際の上記の構成によれば、プロジェクト、またはいくつかの問題があるだろう一緒にパッケージた場合、いくつかのライブラリパッケージは、それが大きなファイルを開くには、同時ブラウザの数を活用する必要がありますので、それは、ファイルが大きすぎる原因となり、比較的大きくなりwebpack4主な用途は、splitChunks構成は、次のプロジェクト構成されています

splitChunks：{ 
            maxAsyncRequests：6 、
            cacheGroups：{ 
                ブレース：{ 
                    名： 'ブレース' 、
                    チャンク： 'すべて' 、
                    優先度： 10 、
                    テスト：getTestFn（関数（名前）{ 
                        CONST REG = 新しい正規表現（/ブレース/ ）;
                         なら（
                            name.indexOf（ '/コンポーネント/エース/'）！== -1 || 
                            name.indexOf（ '/コンポーネント/ SQLフォーマッタ/'）！== -1 ||
                            name.indexOf（ ！'/ node_modules /反応-エース/'）== -1 
                        ）{ 
                            返す 真。
                        } 
                        戻りreg.test（名）; 
                    }）
                }、
                echarts：{ 
                    名： 'echarts' 、
                    チャンク： 'すべて' 、
                    優先度： 10 、
                    テスト： / echarts | zrender / 
                }、
                LIBS：{ 
                    名： 'LIBS' 、
                    チャンク： 'すべて' 、
                    優先順位： 9 、
                    テスト：getTestFn（関数（名）{ 
                        constのREG = 新しい正規表現（/バベル-ポリフィル| \ /反応\ / |反応-DOM |反応-ルータ-DOMを| mobx | lodash / ）;
                         戻りreg.test（名）; 
                    }）
                }、
                スタイル：{ 
                    名： 'スタイル' 、
                    テスト： /\.(less|css|scss)$/ 、
                    チャンク： '非同期' 、
                    minChunks： 1 、
                    reuseExistingChunk：真、
                    強制：真、
                    優先順位： 8 
                }、
                非同期：{ 
                    名： '非同期' 、
                    チャンク： '非同期' 、
                    minChunks： 2 、
                    reuseExistingChunk：真、
                    優先順位： 7 
                }、
                デフォルト：偽、
                ベンダー。偽
            } 
        }

フィールドのいくつかの内部の下で（エラーがあるかもしれません、私を修正してください）ことに留意すべきです

chunks：「初期」の初期化は、私はそれがコンフィギュレーションのエントリであると思います

「非同期」非同期、パッケージ分割の非同期輸入同等の内容

「すべて」：すべて

優先順位：優先順位、大きい値、最初の実行

minChunks：参照カウントがパッケージ化され、この値よりも大きいです

梱包最適化のアイデア、

　　ここでIは、関数によって設定されたテストだけでなく、関連するいくつかのエディタと共にパッケージ。そのようなコードエディタのエースとして別々に包装最初大きなライブラリー、ビジュアルアイコンecharts、

　　B。番号は変更される可能性はありませんが、基本的なライブラリパッケージをアップグレードし、LIBSの設定

　　C。いくつかの一般的なコードパッケージ。非同期設定。注minChunks：async.jsにパッケージ化されますつ以上のローカル参照がある場合、図2に示すように、この構成では、この設定minChunksは、実際のシーンを見て、最終的には数を記入し、ファイルの残りの上完全なパッケージです

D.vendorsケースと、デフォルトはデフォルトの設定で、以下は関連する構成で、ベンダーがnode_modulesでパッケージされ、デフォルトでは非常に詳細な自分自身を設定し、コードのパッケージを繰り返すことで、あなたはスワップを無効にする必要があります

ベンダー：{ 
     テスト： / [\\ /] node_modules [\\ /] / 、
     優先度： -10 
 }、
 デフォルト：{ 
     minChunks：2 、
     優先度： -20 、
     reuseExistingChunk：真
 }

Webpack4 splitChunks構成、ディスクリートロジックコード

1.コードのアップグレード

おすすめ