web-dev-qa-db-ja.com

揺れるcreate-react-app?

私は自分のReact app with create-react-app を作成し、TypeScriptを create-react-app-TypeScript で使用するようになりました。

すべてが正常に動作しますが、問題は-特に私は良いが重い material-ui を使用しているためです-ビルドされたバンドルのサイズは非常に大きく、ほぼ1MBに達しています。

(Webpack 2や rollup のような)ツリーシェーキングツールを使用するにはどうすればよいですか?ejectを既に使用したくないので、Webpack構成に実際にアクセスできないようです。

縮小されたコードをツリーシェイクできることを願っています:)

ありがとう!

15
mllm

プロジェクトがcreate-react-appでビルドされている場合、最新バージョンに修正が含まれています。react-scriptsをバージョン2.0.4以降に更新してください。

npm install react-scripts@latest --save

この新しいバージョンは、更新された依存関係のおかげでツリーの揺れが非常に優れています。私はmaterial-uiとmdi-material-uiの両方でテストしました。

9

create-react-app-TypeScript プロジェクトのmaterial-uiのインポートを、次のスタイルから変更して書き換えました。

import {FloatingActionButton} from "material-ui";

これに:

import FloatingActionButton from "material-ui/FloatingActionButton";

編集:これはもう少しコンテキストを与えます: https://github.com/mui-org/material-ui/issues/11916 #issuecomment-401214838

5
mikebridge