번들로 제공되는 ReactJS 앱의 크기

Question

reactjs 애플리케이션 번들 .js 파일의 크기를 줄이려고합니다. 상대적으로 간단한 애플 리케이션을 위해 나는 browserified js 파일 크기 - 452Kb있다.

{ 
     "name": "MyApp-React", 
     "version": "0.0.1", 
     "description": "My App Description", 
     "main": "app.js", 
     "scripts": { 
     "watch": "watchify app.js -o public/js/bundle.js -v", 
     "browserify": "browserify app.js | uglifyjs > public/js/bundle.js", 
     "build": "npm run browserify", 
     "start": "npm install" 
     }, 
     "author": "", 
     "dependencies": { 
     "axios": "^0.14.0", 
     "body-parser": "^1.15.2", 
     "clipboard": "^1.5.12", 
     "express": "~4.9.7", 
     "express-handlebars": "~1.1.0", 
     "express-session": "^1.14.1", 
     "highlight.js": "^9.7.0", 
     "node-jsx": "~0.12.4", 
     "react": "~15.3.1", 
     "react-dom": "^15.3.1", 
     "react-maskedinput": "^3.2.4", 
     "react-modal": "^1.4.0", 
     "react-router": "^2.8.1" 
     }, 
     "devDependencies": { 
     "browserify": "~6.0.3", 
     "nodemon": "^1.2.1", 
     "reactify": "~1.1.1", 
     "uglify-js": "~2.4.15", 
     "watchify": "^3.1.1" 
     }, 
     "browserify": { 
     "debug": false, 
     "transform": [ 
      "reactify" 
     ] 
     } 
    } 

내가 뭔가 잘못 할 희망 노드 JS/ReactJS 개발의 전문가 인 아니,하지만 난 무엇을 찾을 수 없습니다 :

내가 각각의 package.json 파일과 NPM을 사용을 구축합니다. 시간에 대한

나는 몇 가지 시도되고 : app.js 파일이

process.env.NODE_ENV = 'production'; 

내가 시도 두 번째 것은으로 NPM의 자두 명령을 사용하는 것입니다 NODE_ENV 변수를 설정하는 코드의 라인에 '생산'이 - - 생산 매개 변수. 이 실행을 가지고, 나는 그것이 node_modules 폴더에서 많은 것을 제거하지만, npm 실행 빌드가 devDependencies를 그리워하면서 실행에 실패하고 있음을 알 수 있습니다. 내가 무엇을 할 수 있을지? 당신이 사용자의 다운로드 부담을 밝게 할 수

Answer 1

한 가지 이 및 반응-DOM를 CDN을에서 대신 번들에 이르렀의 반응을 얻을 것입니다.

은 새로운 섹션에 package.json의 종속 섹션에서 peerDependencies ( see npm docs을)를 이동

.

다음과 같이 반작용로드에 대한 귀하의 HTML 코드에 태그를 추가하고 ReactDOM :

이

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> 

→ 당신이 이 및 반응 인식하도록 Browserify의 설정을 변경해야

React on cdnjs.com을 다음을 참조하십시오 외부 모듈로을 사용하십시오. 특급 (및 대한 익스프레스 모듈)을 제거

→ 참조 related question on StackOverflow