브런치 : 업체 및 앱 자바 스크립트

Question

Google 벤더 및 앱에서 두 묶음의 자바 스크립트를 만들었습니다.

files: { 
    javascripts: { 
    joinTo: { 
     'js/vendor.js': /^(?!source\/)/, 
     'js/app.js': /^source\// 
    }, 
    entryPoints: { 
     'source/scripts/app.jsx': 'js/app.js' 
    } 
    } 
} 

을 그리고 나는 vendor.js와 app.js.와 끝까지 내 브런치-config.js에서이 코드와 같이 나는 documentation에서 제안하는 방식으로이 작업을 수행 그러나 파일 크기를 확인하십시오 :

app.js가 vendor.js보다 얼마나 큰지주의하십시오! 이 큰 크기로 인해 필요한 것보다 느리게 보입니다. app.js의 내용을 검사 할 때 lodash, React 및 기타 라이브러리가 포함되어있는 것으로 보였습니다. vendor.js에서 가져올 것으로 예상 했었습니다. 그리고 vendor.js는 내가 기대하는 것과 같은 라이브러리를 포함하고있는 것 같습니다.

내 질문 : 왜 app.js에 라이브러리가 있습니까? app.js가 vendor.js에서 app.js를 참조하지 않는 이유는 무엇입니까?

일부 구성이 누락되었을 수 있습니다. 여기에 귀하의 시험에 대한 내 전체 브런치-config.js은 다음과 같습니다

module.exports = { 

    files: { 
    javascripts: { 
     joinTo: { 
     'js/vendor.js': /^(?!source\/)/, 
     'js/app.js': /^source\// 
     }, 
     entryPoints: { 
     'source/scripts/app.jsx': 'js/app.js' 
     } 
    }, 
    stylesheets: {joinTo: 'css/core.css'}, 
    }, 

    paths: { 
    watched: ['source'] 
    }, 

    modules: { 
    autoRequire: { 
     'js/app.js': ['source/scripts/app'] 
    } 
    }, 

    plugins: { 
    babel: {presets: ['latest', 'react']}, 
    assetsmanager: { 
     copyTo: { 
     'assets': ['source/resources/*'] 
     } 
    }, 
    static: { 
     processors: [ 
     require('html-brunch-static')({ 
      processors: [ 
      require('pug-brunch-static')({ 
       fileMatch: 'source/views/home.pug', 
       fileTransform: (filename) => { 
       filename = filename.replace(/\.pug$/, '.html'); 
       filename = filename.replace('views/', ''); 
       return filename; 
       } 
      }) 
      ] 
     }) 
     ] 
    } 
    }, 

    server: { 
    run: true, 
    port: 9005 
    } 

}; 

및 HTML에서이 같은이 파일이 필요합니다

<script type="text/javascript" src="js/vendor.js" defer></script> 
<script type="text/javascript" src="js/app.js" defer></script> 

내가 주문 객체를 설정 시도하지만 아무 소용이 :

를

{ 
    "version": "0.0.1", 
    "devDependencies": { 
    "assetsmanager-brunch": "^1.8.1", 
    "babel-brunch": "^6.1.1", 
    "babel-plugin-add-module-exports": "^0.2.1", 
    "babel-plugin-rewire": "^1.0.0-rc-5", 
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3", 
    "babel-plugin-transform-object-rest-spread": "^6.8.0", 
    "babel-preset-react": "^6.3.13", 
    "babel-register": "^6.11.6", 
    "browser-sync-brunch": "^0.0.9", 
    "brunch": "^2.10.9", 
    "brunch-static": "^1.2.1", 
    "chai": "^3.5.0", 
    "es6-promise": "^3.2.1", 
    "eslint-plugin-react": "^5.1.1", 
    "expect": "^1.20.2", 
    "html-brunch-static": "^1.3.2", 
    "jquery": "~2.1.4", 
    "jquery-mousewheel": "^3.1.13", 
    "mocha": "^3.0.0", 
    "nib": "^1.1.0", 
    "nock": "^8.0.0", 
    "oboe": "~2.1.2", 
    "paper": "0.9.25", 
    "path": "^0.12.7", 
    "pug": "^2.0.0-beta10", 
    "pug-brunch-static": "^2.0.1", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "react-redux": "^4.4.5", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-mock-store": "^1.1.2", 
    "redux-promise": "^0.5.3", 
    "redux-thunk": "^2.1.0", 
    "reselect": "^2.5.3", 
    "spectrum-colorpicker": "~1.8.0", 
    "stylus-brunch": "^2.10.0", 
    "uglify-js-brunch": "^2.10.0", 
    "unibabel": "~2.1.0", 
    "when": "~3.4.5" 
    }, 
    "dependencies": { 
    "jwt-decode": "^2.1.0", 
    "lodash": "^4.17.4", 
    "postal": "^2.0.5", 
    "rc-tree": "^1.3.9" 
    }, 
    "scripts": { 
    "test": "mocha --compilers js:babel-register" 
    } 
} 

: 여기

files: 
    javascripts: { 
    joinTo: { 
     'js/vendor.js': /^(?!source\/)/, 
     'js/app.js': /^source\// 
    }, 
    entryPoints: { 
     'source/scripts/app.jsx': 'js/app.js' 
    }, 
    order: { 
     before: /^(?!source)/, 
     after: /^source\// 
    } 
    } 
} 

내 package.json의

또 다른 생각은 import 대신 require을 사용해야 할 수 있습니까?

도움이 될만한 정보가 있으면 알려 주시기 바랍니다. 당신의 도움을 주셔서 감사합니다.

UPDATE

여기에 간단하게 내 폴더 구조입니다 :

assets 
css 
|---core.css 
js 
|---app.js 
|---app.js.map 
|---vendor.js 
|---vendor.js.map 
home.html 

디버그 그것을 자신을 위해 :

node_modules 
source 
|---resources 
|---scripts 
|---styles 
|---views 

여기 brunch build에 의해 생성 된 출력 구조의이! MVCE를 사용할 수 있습니다. 다음 지침에 따라

1. 클론이 example repository
2. npm install
3. brunch build
4. 이 public/js에 app.js 및 vendor.js의 크기를 비교하여 (이 npm install brunch -g와 함께 전 세계적으로 설치되어 있는지 확인). 각각 744KB 및 737KB 여야합니다. app.js의 내용을 살펴보고 라이브러리 내용을 기록하십시오. 을 정규 표현식 /^source\//과 함께 사용하려면 어떻게해야하나요?

Answer 1

이 문제는 joinTo과 entryPoints이 섞여서 발생합니다.나는 당신의 설정에서 코드를 먼저 과 vendor.js로 나눈 것으로 가정하지만 app.js은 entryPoints의 출력으로 덮어 쓰게됩니다. 1

가 entryPoints 선언을 제거

옵션 : 그것을 해결하기 위해

, 당신은 옵션 중 하나를 선택해야합니다. 그러면 제공된 RegEx를 따라 코드가 분할됩니다.

옵션

2는 joinTo 선언을 제거하고 entryPoints의 변경이 매우 경우

entryPoints: { 
     'source/scripts/app.jsx': { 
     'js/vendor.js': /^(?!source\/)/, 
     'js/app.js': /^source\// 
     }, 
    } 

결론

, 두 옵션의 출력은 동일합니다. 그러나 entryPoints을 사용하면 코드가 분석되고 필요한 모듈 만 번들로 제공됩니다. 불필요한 모듈이 없기 때문에 크기가 동일합니다. 자세한 내용은 this issue을 참조하십시오.