検索
ホームページウェブフロントエンドjsチュートリアルReact と Webpack を使用してパッケージングを最適化するにはどうすればよいですか?

この記事では、React + Webpack の構築とパッケージ化の最適化について紹介し、参考にしていきます。

babel -react-optimize を使用して React コードを最適化します

未使用のライブラリをチェックし、インポート参照を削除します

lodash、echart などの使用ライブラリをオンデマンドでパッケージ化します

lodash は babel-plugin を使用して最適化できます-ロダッシュ。

は、babel-react-optimizeのbabel-plugin-transform-react-remove-prop-typesプラグインを使用することに注意してください。通常、コード内でコンポーネントの PropType を参照しなくても、まったく問題ありません。このプラグインをコンポーネントで使用すると、問題が発生する可能性があります。

詳細については、次を参照してください:

https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types#is-it-safe

Webpack のビルドとパッケージの最適化

Webpackビルドとパッケージの存在 問題は主に次の 2 つの側面に焦点を当てています:

    Webpack のビルドが遅い
  1. Webpack のパッケージ化されたファイルのサイズが大きすぎる
Webpack のビルドが遅い

Webpack.DDLPlugin および HappyPack ビルド速度を向上させます。詳細については、DMP DDLPlugin に関する Xiaoming のドキュメントを参照してください。元のテキストは次のとおりです:

Webpack.DLLPlugin

webpack.dll.config.js の追加

は主に DllPlugin プラグインを使用して、いくつかのサードパーティ リソースを個別にパッケージ化し、それらを manages.json 構成ファイルに配置します。


このように、コンポーネントでの更新後、これらのサードパーティ リソースは再構築されません

    同時に、dll/vendors.js ファイルは独立して構成され、webpack.dll.config に提供されます。 .js
  1. package.json
  2. を変更します

  3. スクリプトに「dll」:「webpack --config webpack.dll.config.js --progress --colors」を追加します。

npm run dllを実行すると、dllディレクトリにvendor-manifest.jsonとvendor.dll.jsの2つのファイルが生成されます

webpack.dev.config.jsファイルを設定し、DllReferencePluginプラグインを追加して指定しますベンダーマニフェスト .json ファイル

new webpack.DllReferencePlugin({
 context: join(__dirname, 'src'),
 manifest: require('./dll/vendor-manifest.json')
})

html を変更します

<% if(htmlWebpackPlugin.options.NODE_ENV ===&#39;development&#39;){ %>
 <script src="dll/vendor.dll.js"></script>
<% } %>

htmlWebpackPlugin プラグインの NODE_ENV パラメータを設定する必要があることに注意してください

Happypack

マルチスレッド、キャッシュなどを通じてリビルド効率を向上させます。 https:// github.com/amireh/happypack

webpack.dev.config.js でさまざまなリソースに対して複数の HappyPack (1 js、1 less など) を作成し、id を設定します

new HappyPack({
 id: &#39;js&#39;,
 threadPool: happyThreadPool,
 cache: true,
 verbose: true,
 loaders: [&#39;babel-loader?babelrc&cacheDirectory=true&#39;],
}),
new HappyPack({
 id: &#39;less&#39;,
 threadPool: happyThreadPool,
 cache: true,
 verbose: true,
 loaders: [&#39;css-loader&#39;, &#39;less-loader&#39;],
})

module.rules で happypack/loader として使用するように設定します。 ID を設定します

{
 test: /\.js$/,
 use: [
 &#39;happypack/loader?id=js&#39;
 ],
 exclude: /node_modules/
}, {
 test: /\.less$/,
 loader: extractLess.extract({
 use: [&#39;happypack/loader?id=less&#39;],
 fallback: &#39;style-loader&#39;
 })
}

Webpack パッケージ化後のファイル サイズの削減

まず、バンドル全体、バンドルの構成要素、および各コンポーネントのサイズを分析する必要があります。

ここでは Webpack-bundle-analyzer をお勧めします。インストール後、プラグインを webpack.dev.config.js に追加するだけで、以下に示すように、各起動後に分析結果が Web サイト上で自動的に開かれます

plugins.push( new BundleAnalyzerPlugin());

さらに、パッケージ化プロセスはjson ファイルとして出力されます

webpack --profile --json -> stats.json

次に、分析のために次の 2 つの Web サイトに移動します

    webpack/analyse
  1. Webpack Chart
  2. 上記のチャート分析を通じて、バンドル全体のコンポーネントが明確に確認できます。 .js と対応するサイズ。

bundle.js サイズが過剰になる問題の解決策は次のとおりです:

    本番環境で圧縮とその他のプラグインを有効にし、不要なプラグインを削除します
  1. ビジネスコードとサードパーティを分割しますライブラリとパブリック モジュール
  2. webpack gzip 圧縮を有効にする
  3. オンデマンドでロードする
  4. 実稼働環境で圧縮とその他のプラグインを有効にし、不要なプラグインを削除する

必ず webpack.DefinePlugin を起動し、運用環境の webpack.optimize.UglifyJsPlugin。

const plugins = [
 new webpack.DefinePlugin({
  &#39;process.env.NODE_ENV&#39;: JSON.stringify(process.env.NODE_ENV || &#39;production&#39;)
 }),
  new webpack.optimize.UglifyJsPlugin({
  compress: {
   warnings: false,
   drop_console: false //eslint-disable-line
  }
  })   
]

ビジネス コードをサードパーティ ライブラリとパブリック モジュールで分割する

プロジェクトのビジネス コードは非常に頻繁に変更されるため、サードパーティ ライブラリのコードの変更頻度は比較的低くなります。ビジネス コードと 3 番目のライブラリが同じチャンクにパッケージ化されている場合、ビルドごとに、ビジネス コードが 1 行だけ変更された場合でも、サードパーティ ライブラリのコードが変更されなかった場合でも、チャンク全体のハッシュは前回とは異なります。これは私たちが望む結果ではありません。私たちが望んでいるのは、サードパーティ ライブラリのコードが変更されない場合、構築時に対応するハッシュが変更されないことを確認し、ブラウザ キャッシュを使用してページ読み込みのパフォーマンスを向上させ、ページ読み込みを短縮できるようにすることです。時間。

そのため、3 番目のライブラリのコードをベンダー チャンクに個別に分割し、ビジネス コードから分離することができます。このように、ビジネス コードがどのように変更されても、サードパーティのライブラリ コードが変更されない限り、対応するハッシュは変更されません。

まず、エントリは 2 つのアプリとベンダーの 2 つのチャンクを構成します

entry: {
 vendor: [path.join(__dirname, &#39;dll&#39;, &#39;vendors.js&#39;)],
 app: [path.join(__dirname, &#39;src/index&#39;)]
},
output: {
 path: path.resolve(__dirname, &#39;build&#39;),
 filename: &#39;[name].[chunkhash:8].js&#39;
},

ここで、vendros.js は、ベンダーにどのサードパーティ ライブラリを含める必要があるかを独自に定義したものです。次のとおりです。

require(&#39;babel-polyfill&#39;);
require(&#39;classnames&#39;);
require(&#39;intl&#39;);
require(&#39;isomorphic-fetch&#39;);
require(&#39;react&#39;);
require(&#39;react-dom&#39;);
require(&#39;immutable&#39;);
require(&#39;redux&#39;);

次に、CommonsChunkPlugin を通じて 3 番目のライブラリを分割します

plugins.push(
 // 拆分第三方库
 new webpack.optimize.CommonsChunkPlugin({ name: &#39;vendor&#39; }),
 // 拆分 webpack 自身代码
 new webpack.optimize.CommonsChunkPlugin({
  name: &#39;runtime&#39;,
  minChunks: Infinity
 })
);

上面的配置有两个细节需要注意

  1. 使用 chunkhash 而不用 hash

  2. 单独拆分 webpack 自身代码

使用 chunkhash 而不用 hash

先来看看这二者有何区别:

  1. hash 是 build-specific ,任何一个文件的改动都会导致编译的结果不同,适用于开发阶段

  2. chunkhash 是 chunk-specific ,是根据每个 chunk 的内容计算出的 hash,适用于生产

因此为了保证第三方库不变的情况下,对应的 vendor.js 的 hash 也要保持不变,我们再 output.filename 中采用了 chunkhash

单独拆分 webpack 自身代码

Webpack 有个已知问题:

webpack 自身的 boilerplate 和 manifest 代码可能在每次编译时都会变化。

这导致我们只是在 入口文件 改了一行代码,但编译出的 vendor 和 entry chunk 都变了,因为它们自身都包含这部分代码。

这是不合理的,因为实际上我们的第三方库的代码没变,vendor 不应该在我们业务代码变化时发生变化。

因此我们需要将 webpack 这部分代码分离抽离

new webpack.optimize.CommonsChunkPlugin({
   name: "runtime",
   minChunks: Infinity
}),

其中的 name 只要不在 entry 即可,通常使用 "runtime" 或 "manifest" 。

另外一个参数 minChunks 表示:在传入公共chunk(commons chunk) 之前所需要包含的最少数量的 chunks。数量必须大于等于2,或者少于等于 chunks的数量,传入 Infinity 会马上生成 公共chunk,但里面没有模块。

拆分公共资源

同 上面的拆分第三方库一样,拆分公共资源可以将公用的模块单独打出一个 chunk,你可以设置 minChunk 来选择是共用多少次模块才将它们抽离。配置如下:

new webpack.optimize.CommonsChunkPlugin({
 name: &#39;common&#39;,
 minChunks: 2,
}),

是否需要进行这一步优化可以自行根据项目的业务复用度来判断。

开启 gzip

使用 CompressionPlugin 插件开启 gzip 即可:

// 添加 gzip
new CompressionPlugin({
 asset: &#39;[path].gz[query]&#39;,
 algorithm: &#39;gzip&#39;,
 test: /\.(js|html)$/,
 threshold: 10240,
 minRatio: 0.8
})

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

使用Vue如何实现拦截器对token处理方法有哪些?

使用js和jQuery如何实现指定赋值方法

有关Vue中如何换肤?

以上がReact と Webpack を使用してパッケージングを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか?JavaScriptをインストールするにはどうすればよいですか?Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境