web-dev-qa-db-ja.com

Create-React-App Chunkingメカニズムをオフにすることはできますか？

Create-React-Appを使用してMy React Appプロジェクトを設定しています。

Reactスクリプトに組み込まれているチャンキングメカニズムをオフにする方法があるかどうか疑問に思いました。そのことは、ビルド上に作成されたバンドルの名前を修正する必要があるということです。

create-react-appchunkschunking
7
Darko

私は衝突をオフにする方法がわからないが、あなたができることをあなたに達成することを試みることができる

最新のReact and React-DOMを更新し、 'yarn react @ next react-dom @ next'（またはnpmコマンド）を実行します。

これで、最新のReactバージョンがあります。そのため、React.lazy/React.Supense、フックなどを使用して分割をコーディングできます。

だから今、あなたはあなたのチャンクを使用して（以下のコンポーネントまたは依存の例）を挙げてください）

 const MyComp = lazy(() =>   import(/* webpackChunkName: 'MyChunkNmame'
*/ './MyComp'), );

const myLib= await import(/* webpackChunkName: "myLib" */ 'myLib');
 _

インポート構文を使用するときにエラーの問題がある場合は、babel-plugin-syntax-動的インポートプラグインを使用する必要があります。あなたのパッケージのJSONに "Babel"フィールドを置きます。

これであなたはあなたの塊に名前を付けることができ、Splits Splits-hopeをコードするための最新の方法を実装することができます - それが役立ちます。これはReact.Lazy React.Supense https://reactjs.org/blog/2018/10/23/react-v-16-6.html

3
dorriz

Webpack configを変更できるようにするreact-app-rewiredパッケージでCRAを拡張することでできることです。

ファイル名のビルドでハッシュを削除するために必要な変更。

  1. React-App-ReWiredをインストールします

npm install react-app-rewired --save-dev

  1. ルートフォルダにconfig-overrides.jsファイルを作成します（package.jsonはis）

  2. 次のコードをconfig-overrides.jsファイルに配置します。それはすべてのCRA設定を保持し、ファイル名からハッシュ部分を削除するだけです。

[。] module.exports =関数オーバーライド（config、env）{[。]output = {[.Output =。] ... config.output、//すべての設定[。____] filenameをコピーする：「静的/ js/[name] .js "、[。] chunkfileName：" static/js/[name] .chunk.js "、[。}; [。] [。] config; [。]。[ 。}; [。____]。
  1. 新しい設定を使用してください。 _scriptsセクションのpackage.jsonファイルで"build": "react-scripts build",を"build": "react-app-rewired build",に置き換えてください。

もっと設定を変更しようとしていない限り、buildのreact-app-rewiredのみを使用するのに十分です。それ以外の場合は、ejectを除く他のスクリプトでreact-scriptsをreact-app-rewiredに置き換えます。

2
fandasson