reactify.min.jsとreact-dom.min.jsのBrowserifyバンドルを減らす

Question

いくつかのReactライブラリをBrowserifyと--requireとバンドルしたいが、ファイルサイズ分を差し引いた。

私は、次のBrowserifyコマンドを使用

：今

browserify path/to/react.min.js path/to/react-dom.min.js > libs.js 

を、react.min.jsは21Kで、反応-dom.min.jsは122Kですが、なんと269kでlibs.js結果。確かに126kのBrowserifyオーバーヘッドはありませんか？ libs.jsを見ると、Reactコードがたくさん追加されています。これはどこから来たのですか？

Answer 1

問題は、のコールがreact-domのreactモジュールがnode_modulesに解決されています。そのモジュールのpackage.jsonにはmainがreact.jsと指定されています。そのため、react.min.jsに加えて、非縮小ソースも含まれるバンドルになります。

browserify \ 
--require ./node_modules/react/dist/react.min.js:react \ 
> bundle-react.js 

バンドルサイズがわずかに大きいだけreact.min.jsよりです：あなたが唯一のreact.min.jsをバンドルした場合、その

注

ls -l node_modules/react/dist/react.min.js 
... 21339 Dec 23 09:43 node_modules/react/dist/react.min.js 

ls -l bundle-react.js 
... 22006 Dec 23 11:56 bundle-react.js 

問題を解決するために、あなたはreactを除外するBrowserifyを指示する必要がありますし、 react-domのように、代替のメカニズムを提供する必要があります。つまり、--requireオプションを指定します：

browserify \ 
--exclude react \ 
--require ./node_modules/react/dist/react.min.js:react \ 
--exclude react-dom \ 
--require ./node_modules/react-dom/dist/react-dom.min.js:react-dom \ 
> bundle-lib.js 

バンドルサイズは現在組み合わせ、縮小さファイルに非常に近いようになります。

ls -l node_modules/react/dist/react.min.js 
... 21339 Dec 23 09:43 node_modules/react/dist/react.min.js 

ls -l node_modules/react-dom/dist/react-dom.min.js 
... 123996 Dec 23 09:43 node_modules/react-dom/dist/react-dom.min.js 

ls -l bundle-lib.js 
... 146227 Dec 23 11:39 bundle-lib.js 

あなたはその後あなたのライブラリーのバンドルからreactとreact-domを必要とするアプリケーションバンドルを作成することができるはずです。アプリケーションバンドルを作成するためのBrowserifyコマンドはreactとreact-domため--excludeオプションを指定する必要があることに注意してください - 彼らは、ライブラリバンドルからではなくnode_modulesから必要とされるように：

browserify \ 
--exclude react \ 
--exclude react-dom \ 
app.js > bundle-app.js