著者| アリ・エンターテイメント・フロントエンド開発の専門家鵬蘇
Zebian |火ミン
ヘッドフィギュア| CSDNビジョン中国からダウンロード
入門
▐ 進化を構築するためのフロントエンドツール
開発者は徐々に兵卒タスクランナーツールの広範な使用からなって始まった2015--2016年に、パイプラインは、ツールのこのフォームを一気に転送することを思い出してください。グッはまた、リフレッシュページとして、簡単な制御に明らかとなり、リンクの全体のフロントエンドが動作する準備ができているように、（例えばグッ-streamifyなど）プラグインの数にパーソナライズすることができ、コードはコンパイルされ、圧縮、等々されます。複雑な手動作業の多くを置き換えるために、「組立ライン」ツールを自動化、それがクロス年齢の感覚と言うことができます。それは、その本質は、「モジュラー」の考え方に基づいており、WebPACKのにある属し井戸sea.jsと同じドアの異なる派閥の解決策、早期出産、および他の同様のプログラムもBrowserify、およびWebPACKのを「JSは、プリコンパイル」またはrequire.js、コンパイルインタプリタ「オンラインに依存している」との両方が必要。
プロジェクト今日は、毎日の仕事の連絡先のほとんどは、すでに完全にがぶ飲みを放棄します。しかし、時にはいくつかの古いプロジェクトと接触して動作し、ガルプの使用と保守が一般的です。ときは2019年の初めには、古いプロジェクトを通じて（ゴクゴク3.xの+のWebPACK 3.xの）技術のアップグレード、ダイナミクスがぶ飲みの4.xを理解する機会だけでなく、思わせる一気-browserify、と一息-WebPACKの（ ）5年前、解放現在WebPACKのストリームの名前を変更しました。したがって、一つの解決策として垂直のWebPACKは、当然のことながら、manaually内蔵ガルプにあります。テイクWebPACKの「計画」では、問題を解決するためのスコープやアイデアを明確にする必要性の両方の正の比較を行うためにガルプクラス「ツール」。今日は、もう一度基本的な目的概念を持つように、オーダーの技術進化の発展の歴史を見直します。
2017年に、とき、ガルプとWebPACKのユーザの使用上のとは意図がサブパーではありません「を使用していきます」。しかし、「Javascriptの2019年の国家」見ることができますが、WebPACKのは、完全に他のツールやライブラリを巻いてきた、広く皆、議論のビルドツールで使用首位となっています。2018年2月25日WebPACKの公式バージョン4.0.0がリリースされ; ;それは、プロジェクトの多くはWebPACKのに4.10.2のバージョンをアップグレードされていると新年の後、プロジェクトのターン部に最新バージョン4.29.0にアップグレードする前に。モジュールをビルドするための新しいアイデアやコンセプトのため、片手での「フォローアップのアップグレード」のこのシリーズは、継続的な統合のWebPACK、より良い未来の変化に適応するために、（WebPACKのベータバージョン5.xはすぐにオーバーする必要があります利用できるa）になり、他方では、常に製品の安定性を確保し、効率を改善するために、インフラプロジェクトの組み合わせを最適化しようとする良いプログラムです。
▐この口コミ
プロジェクトのごく一部が、ちょうど先端CIプロセス（ビルドビルド）で独自の用語で、ノードのパッケージが管理に関する知識や経験に依存するがWebPACKのツールが、それはスキルの一部です。自体はJavascript /翻訳コンパイル言語に対処するために、だけでなく、などの適切な複数の生態バベル、typescriptです、flow.js、eslint構成、とWebPACKの彼らのパッケージやサードパーティ製のプラグインの生態系が関与ビューの詳細。そして、ローカルおよびリモートのCDN静的リソースファイルリソースファイルのパスを（パッケージ化された構成が詰まっ結果を決定する）を管理する権利は、クロスドメインの知識とノード層のサービス設定テンプレートの設定の知識に関連します。さらにそこに、NPM多くのパッケージのバージョン管理が問題を厄介。すべてのサードパーティ製ツールの前提の下で正しく使用し、おそらくいくつかのプラグインガジェット、数多くの些細な詳細は、開発者は、研究開発から移動する必要があります。グレート知識系統は明らかです。
この記事ではWebPACKのドキュメントのユーザーガイドを説明し、また、サードパーティ製のプラグインの使用については説明しません「北を指しています。」より多くのプロジェクトは、過去の経験の組み合わせである、技術を使用して得られた記録の練習は、フロントエンド技術に他の多くの人々に希望をもたらした迂回路問題のも記録数は少しの参照を再生することができます。 （一覧を確認するためのパッケージ変更は：リアクト：16.3.2、バベル：7.0.0、WebPACKの：4.29.0、ノード：11.8.0）
ファイル構造
以前のバージョン4.xで、CLIツールセットのコマンドはWebPACKのメインパッケージが来るが、それ以降のバージョン4.xのWebPACKは、WebPACKの-CLIは、別のパッケージのように除去別個手動でインストールすることができる行いますTNPMは、このスクリプトコマンドを起動して実行します。第二に、開発/日常の環境（DEV）とプリ開発/本番環境（PROD）、パッケージング戦略は非常に異なっています：
日常のdevの環境の場合1：
便利なデバッグおよびトラブルシューティン、比較的強いソースマッピング。
私たちは、小さな粒子サイズを得ることを望ん、およびコードの負荷変動に応じて（ライブリロード/ホットモジュールの交換）集中しています。
希望いくつかのデバッグプロキシプロキシ関連を行うには、
状況、地元のdevのサーバー構成などに応じて簡単に開発することができます。
製品版の本番環境2.：
圧縮Javscriptによって/ CSSコードは、小さいファイルローディング量を取得し、
これにより、ロード時間を短縮、パッケージを解体することによって、より良いロード戦略を取得するには、
比較的軽量ソースマッピング（もちろん、あなたには、いくつかのトレースログを必要としないとアラーム情報は、シナリオの別のラウンドの場合）。
いくつかの個人的な願望製品ライン（例えば、同じJavascriptコードに別のマッチスタイルファイルであってもよい）とのようにします。
3.評価の効率は、典型的には、以下の主な寸法を有し、データ・ソースは、最初の三つに主として定常述べ：
ローカルの開発、コンパイル（W / DLLまたはNO DLL）
（W / DLLまたはNO DLL）地方開発の再コンパイル
ローカルテストビルド（キー部分の分析のWebPACKを分析）
建設クラウド期間（NO DLLまたはOSSサポートDLLの設定）
新しいのWebPACKのバージョン、WebPACKのマージでは：4.2.1別のパッケージの使用、開発者は、開発と生産環境の公開部分が設定されているwebpack.common.jsファイルを使用して、開発環境のwebpack.dev.js、本番環境用webpack.prod.js。区別した後、2つの環境間の構成の違い、一目で：
（図：WebPACKの設定ファイル構造）
「トピックのポイント」ロット内のcz.config.jsとflowGlobalVars.jsについて、ここでの説明に焦点を当てていません。
あなたはDLLを（話は以下の最適化に注力します）を設定する必要がある場合は、我々はまた、webpack.dll.js個別包装された設定ファイルを追加する必要があります。もちろん、DLLは、私たちがwebpack.common.jsファイル内module.exportsはは2つの別々のゾーンを書くことができたときに、実際には通常のファイル出力です。これは、（複数の構成のエクスポート）非常に一般的な柔軟な文言ではない、あなたはより多くのファイルI / Oモジュールおよびモジュールの概念を理解することであってもよいです。
基本/カスタム設定
▐ CommonsChunkPluginを交換します
それは、内webpack.optimization.splitChunksに移されました。セグメンテーションと粒子サイズ制御を開梱WebPACKのレベルの最適化が私たちのために多くのことを行っているから、これは実際には、デフォルトの最適化戦略のセットの基礎そのものです。ビューの類推、それ自体が、ポリシー機構である生態差分アルゴリズムを反応させるが、より最適化され、ユーザは自分の制御を改良するために、被検体内部のコールバックメソッドを追加することができます。
これは、特に注意すべきで何を必要とされているキャッシュをクリア、またはではないcacheGroups、そのカット枝は私たちに冗長なファイルの多くをもたらしたように、粒子サイズの制御は、良くないとき。次のコードは、ベンダーのオブジェクトを定義し、その後、私たちの出力ファイル（chunksFilesが含まれていない）は、それぞれのキャッシュファイルが生成されます。それは余分な時間を梱包ベンダーオブジェクトは、二つの文書、すなわちベンダー-app.jsやベンダー-polyfill.jsを生成します参加した後、加算出力とpolyfill.bundle.jsがapp.bundle.js。不明な点は、何をすべきか、それらを使用する際に、cacheGroups設定は、あなたが真剣に再検討する必要がある場合には、これら二つの文書の内容についてのない心配はいくつかのキャッシュインデックスを入れて、それにコード、が、2つのファイルを再パッケージ化しますが。
▐ OccurrenceOrderPlugin
WebPACKのクラスのコンストラクタ以下そのものではありませんが、（単語をスペルミスしているため、以前の名前）と改名し、新しい場所に置かれた、再書き込みする必要性を呼び出す：新しい新しいwebpack.optimize.OccurrenceOrderPluginを（） 。
▐ terser（デフォルト内蔵の圧縮ツールキット）
新しいバージョンwebpack.optimization.minimizerは、デフォルトでは、組み込みのツールterserJSは、depreacted古いuglifyが処理された古いuglifyJSから変更されている、私はすぐに状態の後、新たなterserより、レガシーになるだろうと信じています良好なパフォーマンス、構文ES6 +のためのより多くのサポートも生態バベル7と互換性があり、他のサードパーティの圧縮ライブラリコードの同時要求。私は現在、terser-WebPACKの-プラグインを使用していて、いくつかの違いがありますterser一般的なパラメータの設定は、手動で独自の導入する必要があります（公式文書を推奨しました）。
▐ module.rules.exclude [0]
module.rules.exclude [0]のアドレスのファイル書き込み、より厳しい要件（将来のバージョン4.11.0）。
我々はmodule.rulesの設定を行う際に、過去には、いくつかのファイルは、あなたが横断したくない、そして我々は、設定によっては、このパラメータを除外し、それは時々 「SRC / contianer / xx.jsx」は、文言を使用して、スキップされ、もし複数のパスインデックス、それは次のように配列を入れてしまうでしょう。しかし、新しいバージョンでは、このようなアプローチは、許可されていない、我々は（path.resolveを使用することができます）ファイルパスに対処するためのステートメントのか/正規表現/言い回し。私はすべてがNPMパッケージプラス指定されたsrcを含んを願って（ボーナスの基本的なヒントは、どのように、定期的かつ特定のパスを記述して設定するには：/(src\/.*)|(node_modules\/.*@ali\/lark-コンポーネント）/）
▐ エイリアス絶対パス
WebPACKのパッケージには、あなたは通常、ファイルへのパスを検索するために必要な、それは正確に場所とファイルの参照が完全なマッピングマッピングは全体の関係を知っている可能、関係を引用したかを知る必要があります。このオーバーヘッドを削減し、我々はそれによって、代わりに書き込みの多くの絶対パス、相対パスを書くことは、configureエイリアスに検討することができます。一方で、それの利点は、その後、入力されていない、最高の書き込みに他の一方で、ファイルの場所を見つけるために速く、ヘルプのWebPACKにある「../../*」または「../../../*」そして、悩んで。
絶対パスを探してWebstorm：ようWebPACKのに参加した設定ファイルのパス内のWebPACKの設定項目に、Webstorm IDEがあなたのエイリアスの対応関係があります。
絶対パスを探してVSCode：プラグインのレベルは、プロジェクトを使用typescriptですされ、tsconfig.jsonの内部に関連する項目をコンパイルするように設定することができますされている場合、あなたはWebstorm上記と同様の効果を得ることができ、良い方法が見つかりませんでした。
▐ 大きな画像のアップロードCDN
アップロードされたCDNたら、実質的に、パッケージの体積を減らすことができます。また、WebPACKのあなたは、インデックスファイルこれらの写真のパスを心配する必要はありません。少し大きめのプロジェクト、最適化の緊急の必要性では非常に一般的な状況で5 MB〜10Mbのローカルの絵。
▐ プロキシプロキシ機能devserver
研究の能力、要求層の変換のおかげ。アピールは、トークンを提供することです表示されなくなりますが、詰めヘッダーによって達成します。ローカル環境の開発では、我々は通常、クロスドメインの問題を解決するためにJSONP使用しますが、その本質は、実際に私たちの本来の意図と一致していないの<script />、自然に記述することはできませんヘッダー情報のためのウェブページに埋め込まれている、ではありません需要を満たすために。だから、そのようなクロスドメインの問題のために、私たちは、「ソースの起源」を「カンニング」クロスドメインローカル開発を解決するために、プロキシ設定を行われた要求とリターンの要求の両端に開始し、いくつかの簡単なパラメータを持っています問題：
devServer: {
// ...
headers: {
'Access-Control-Allow-Origin': '*', // CORS
},
proxy: { // for ajax cors
'/h5/ajaxObj': {
target: 'http://xxx.xxx.xxx.com',
onProxyReq: (proxyReq) => {
proxyReq.setHeader('Origin', 'http://xxx.xxx.com');
},
onProxyRes: (proxyRes) => { // …},
},
},
},ノード/ Happypackにより、パフォーマンスを最適化
基本構成と必要性のカスタム設定は、プロジェクト全体はまだ可能性が非常に不十分である構築するための時間となっている、現在のテストプロジェクトは、ここで述べたように、時間の57Sについてはありますが、多くの場所が残っていますアップしませんでした、最適化することができますスペースが非常に大きいです。
最初のステップは、次のノードのバージョン、テストを集中することであってもよい、全体の速度を向上させることができ、次の変換の別のプロジェクトを実行する前に、時間内に記録されている場合、特にV10のノードV8バージョンでは、物事の少なくとも30％ですデータ：
ノードのバージョン |
V 8.xの |
10.xのV |
コンパイル |
32S - 36S |
26S |
再コンパイル |
8S - 9S |
4S |
しかし、Vの11.xに直接アップグレードプロジェクトは、ノードSASSコンパイラでプロジェクトをビルドすることが判明した後に、この時間は、ばらばらになりました。ノードSASSバージョンは、更新の対応するバージョンを必要とすることを実現します。また、バージョンV 7.xのをアップグレードするバベルのV 6.xのの効果をテストし、当初考えていたバベルメジャーバージョンアップグレードは、実際には（本質的に無視）理想的ではない、大幅な増加のコンパイル速度をもたらすでしょう。
これは、マルチスレッド機能を、この作品のシングルスレッド実行でローダーの中にあるものに対処するためのモジュラーパッケージを開くことを意図しています。効率Happypackにプロジェクト全体の最初のコンパイルを向上させる、効果が、より明白約20％です。Happypack容量を追加する場合、ノートには2つのポイントがあります。
ファイルローダおよびURLローダのサポートは、ほんの少しの一部であるすべての後、私たちはクラス（最高アップロードCDN）とファイルの非常に標準タイプ内の画像を投影し、なくて考えることができ、良いではありません。
これは、マルチスレッドに追加されたTS-ローダーにしようとしたが、多くのコンパイルの問題がありました。私の個人的な疑いは、構成上の問題の可能性が高いですが、プロセスを見てみると、TS-ローダーや生態系の互換性tsは問題に依存の問題の多くを見るために。このプロジェクトは、その最初のしばらくの間、Happypack tsの機能を追加していない、試みとして、ほとんどのファイルがまた.jsxのとの.jsあり、現在はわずか数.TSファイルです。
DLL /最適化によるパフォーマンスを最適化
：最初のような分析のためのいくつかのツールを使用する必要性、グラフ上でこのツールを使用して、我々は全体構築することができますWebPACKのバンドル・アナライザ、（ビルドの生産に使用されるプロセスを、WebPACKのはコンパイルしない、のための分析）プロセスとデータ解析の結果その特定の問題がどこで発生していること。そして、DLLを分割はいを必要とするものを学びます。以下は、最初の分析で得られます：
3532のモジュールと62のチャンクのこの絵は、特定のモジュールおよびチャンク分割後の状況を見ることができます。以下、この絵でより直感的な私たちを見て、あなたは、解析対象のサイズ、エントリーファイル（7.09メガバイト）とメインチャンク（2.04メガバイト、主にいくつかの最初に、node_moduleをロードする必要があります）サイズを確認することができますが誇張されており、かつnode_modulesパッケージ袋は、実質的に11、端正です：
これらの結果と、対応する解決策のアイデアは非常に明確である：我々は（一部のページのみだった最初の一般的に使用されるnode_modulesを（これは、DLLの意味で）引っ張られなければならず、その後、一つずつ分析するために、頻繁にnode_moduleを使用できないように使用、共通の特性を持っていませんが）も描かれています。
プロジェクトを反応、反応させ、反応させ、-ドムなど、Reduxの、ルータに反応するだけでなく、そのようなDLL関連ANTVまたはG2のような大きなサードパーティのライブラリの一部が引き出されるべきです。
モジュールの数は、1500 3532からコンパイル時間を減少三重
DLLが実際に効果が上に引き上げられることはすでに改善のための明白な、さらに部屋です後、最適化は（公式文書の使用を参照）ように構成することができます。
terser
chunksAll
mimimizer Sourcemapで
エンディング
この記事では、我々がロードされたチャンクを見ているような、言及11への道、おそらく基本的な組織構造とカスタム構成、およびどのように最適化性能に解析ツールを実行するには、多くの細部を進化の背景をいくつかのツールを紹介しません時間のハッシュ値は、どのように我々は何のコンポーネントを識別することができます解決策がでルーティング設定moduleNameのを経由して、それを行うことです。
() => import(/* webpackChunkName: "chunkNameDisplay" */'../containers/UserList/chunkNameDisplay')同様に、本当に広いです。WebPACKの5.xのバージョンがリリースされ、多くのチームが使用した後では、おそらく多くのものと大きな変化があるだろう。そして統合の様々な枠組みが整備エンジニアリングプログラマの解放の詳細手は、私たちはプロジェクトの進化に焦点を当て、ますます多様になってきた、どのような驚きの私たちをもたらす生態WebPACKのを見てみましょう。
【終わり】
「フォース計画[第二四半期] -学習能力チャレンジ」開始！
今から3月21日まで、原作者、挑戦にあなたを待って排他的[全表示]メダルをサポートするために流れなければなりません
推奨読書
☞国内14nmの夜明けを迎える、オランダは、リソグラフィ機械工場にスムーズにインポート！
☞中国の本物開発状況報告|アリ華為Baiduの3本柱、高い関税5G、オペレーティングシステムLinuxは王であります
☞ SOTAを達成するために、最新の人体姿勢推定方法、3Dモーショントレーニングデータを必要としない| CVPR 2020
☞コードの12.9億ラインの年間増加は約4,000の毎日のニーズを完了するために、ガチョウの工場プログラマの秘密は、ニュースを破りました！
☞どのように別れを告げるとノウサギはnullでは？偉大な神がやっていることが判明しました！
☞ ハッシュ関数、ハッシュ衝突、オープンハッシュから、ハッシュ記事は最後に構築されているものの考えやハッシュテーブルを示しています！
あなたは、私が好きなよう真剣に、すべてのポイントを見て
