Webpack構築のパフォーマンスを最適化するためのいくつかの推奨事項

Webpackは現在最も流行しているフロントエンド構築ツールの一つとしてvue/reactなどのFrameworkの生態圏において重要な地位を占めている.現代のWebアプリケーションを開発する過程で、Webpackは私たちの開発過程と発表過程と密接に関連しており、Webpack構築パッケージの性能をどのように改善するかは、私たちの開発と発表配置の効率にも関係しています.
Webpack構築のパフォーマンスを最適化するためのいくつかの推奨事項を以下に示します.
一、適切なDevtoolバージョンを選択する
Webpackのdevtool構成は、構築中にsourceMapファイルをどのように生成するかを決定します.通常、evalの性能は最も高いが、生成できないsourceMapファイルで解析されたコードは、ソースコードと大きく異なる.source-mapはパフォーマンスが悪いが、元のバージョンのコードを生成することができる.ほとんどのDevelopmentシーンではcheap-module-eval-source-mapが最適です.
下図は各Devtool配置の対比(+番号が多ければ多いほど代表速度が速くなり、-番号が多ければ多いほど代表速度が遅くなり、oは中程度の速度を表す)
 
注意*:production構成でsourceMapファイルを生成して異常解析を行う必要がある場合は、hidden-source-mapまたはnosources-source-map、source-mapなどの構成を使用します.そしてsourceMapファイルも配置ディレクトリの下に置かないでください.
 
二、Build Cache
Webpackと一部のPlugin/LoaderにはCacheオプションがあります.Cacheオプションをオンにすると、コンストラクションのパフォーマンスが向上します.
たとえば、babel-loaderを使用するときにcacheDirectoryオプションをオンにすると、構築速度が大幅に向上します.

 module: {
    rules: [{
        test: /\.js$/,
        use: ['babel-loader?cacheDirectory'],
        include: path.join(__dirname, 'app')
    }]
 }

 
三、コード体積を減らす

CommonsChunksPluginを使用して複数のchunk間の共通モジュールを抽出し、全体のコード体積

を減少する.

は、コンパイルのたびにWebpackによって処理する

を回避するために、一部の依存をCDNに移行する.

ローカル導入をサポートするクラスライブラリについては、開発中にローカル導入方式を用いる、不要なファイルの導入を回避する

.
たとえばlodashは、部分的な導入をサポートします.

import isArray from 'lodash/isArray';

参考:[Don't import whole lodash](https://github.com/lodash/lodash/issues/3450)
 
この最適化手段を行う際には,可視化ツールを用いてchunkボリュームとコンテンツの解析を行うことができる.Webpackの構成をさらに調整するのに便利です.主に次の2つの方法があります.
1.webpackのprofileコマンドを使用してJSONファイルを生成し、対応するオンラインサイトにJSONをアップロードして可視化分析を行う.

```bash
webpack --profile --json > stat.json
```

Webpack-visualizerを使用して分析します.
2.サードパーティ製pluginを使用して、コンパイル中に体積分析を行い、グラフで出力します.
Webpack-bundle-analyzerの使用を推奨します.
四、ディレクトリ検索範囲を減らす
loaderを使用する場合、excludeとincudeのオプションを指定することで、loaderが遍歴するディレクトリの範囲を減らし、Webpackのコンパイル速度を速めます.
たとえば、babel-loaderがビジネスコードのみを処理するように指定します.

{
   test: /\.js$/,
   use: ['babel-loader'],
   include: path.join(__dirname, 'app')
}

 
五、検索パスを減らす
resolve.aliasはwebpackモジュールの解析の別名を配置することができ、比較的深い解析経路に対してaliasを配置することができる.Webpackの構築速度を向上させることができます.

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

 
六、DllPlugin/DellReferencePluginを用いて事前構築を行う
WebpackのDllPluginとDllReferencePluginは、新しいバージョンで発売されたPluginであり、変更頻度の比較的小さいサードパーティライブラリなどの依存を単独でパッケージ化して構築することを想定しており、プロジェクト全体をパッケージ化する際にDll形式でパッケージ化する依存を解析すると、通常のパッケージ化過程でスキップすることになる.これらの依存性の導入を同時にDllモジュールに導入する.これにより、ビジネスコードをパッケージ化する際の速度が大幅に向上します.
1.ウェブパックなどの個別のウェブパックプロファイルを新規作成する.dll.config.js
2.このプロファイルでは、webpack DllPluginを使用してmanifestを生成する.jsonファイルとDllモジュールファイル.uglifyPlugginによるサードパーティ依存の圧縮などの処理を導入することもできる.

import path from 'path';
import pkg from './package.json';
import webpack from 'webpack';var vendorPackages = Object.keys(pkg.dependencies);const config = {
entry: {
     vendor: vendorPackages
     },
output: {
     filename: 'dll.[name].js',
     path: path.resolve(__dirname, 'build', 'dll'),
     library: '[name]'
      },
plugins: [     new webpack.DllPlugin({
           context: __dirname,
           name: "[name]_[hash]",
           path: path.join(__dirname, "manifest.json"),
     }),     new webpack.optimize.UglifyJsPlugin({
           sourceMap: true,
           minimize: true,
           cache: true,
           parallel: true
       }),
     ]
}
   export default config;

3.通常のwebpackプロファイルでは、webpack DllReferencePluginを使用して、前のステップで生成したmanifestを解析する.json

new webpack.DllReferencePlugin({
        context: path.join(__dirname),
        manifest: require('./manifest.json')
})

具体的に使用する場合、Dllに含まれる依存に変化がない場合には、まず1回のwebpackであるconfig webpackを実行することができる.dll.config.js.その後、ビジネスコードの構築プロセスを複数回実行できます.サードパーティ依存性を剥離したため,ビジネスコードの構築が大幅に速くなる.
Webpack構築のパフォーマンスに関する記事を以下に示します.
1):DllPluginによるパフォーマンスの向上
2):PrefetchPluginの使用
3):webpackパッケージ分析とパフォーマンス最適化
4):webpack使用最適化
転載は出典を明記してください:ブドウ城のコントロール
ブドウ城について
ブドウ城は1980年に設立され、世界最大のコントロールプロバイダであり、世界をリードする企業応用カスタマイズツール、企業レポート、ビジネスインテリジェントソリューションプロバイダであり、75%を超える世界のフォーチュン500強企業にサービスを提供しています.ブドウ城は1988年に中国に研究開発センターを設立し、グローバル化製品の研究開発過程において、中国市場の現地需要に絶えず適応し、ソフトウェア企業と各業界の情報化に優秀なソフトウェアツールとコンサルティングサービスを提供した.