ब्रंच: विक्रेता और ऐप जावास्क्रिप्ट को अलग करना

Question

मैंने अपने प्रोजेक्ट-विक्रेता और ऐप से जावास्क्रिप्ट के दो बंडल बनाए हैं। मैं ढंग documentation ने सुझाव दिया में ऐसा करते हैं, के रूप में मेरे ब्रंच-config.js से इस स्निपेट में देखी गई:

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

और मैं एक vendor.js और एक app.js. साथ खत्म लेकिन फ़ाइल आकारों को देखें:

ध्यान दें कि app.js विक्रेता.js से बड़ा कैसे है! यह बड़ा आकार धीमा दिखने से पहले धीमा दिखता है। App.js की सामग्री का निरीक्षण करने पर, इसमें लॉनाश, रिएक्ट, और अन्य पुस्तकालय शामिल थे, जिन्हें मैंने विक्रेता.जेएस से प्राप्त करने की उम्मीद की थी। और vendor.js में एक ही पुस्तकालय शामिल हैं, जो मुझे उम्मीद है।

मेरा प्रश्न: app.js में पुस्तकालय क्यों मौजूद हैं? App.js उन्हें vendor.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 है

एक और विचार, क्या इसे के बजाय require का उपयोग करने के साथ करना होगा?

यदि कोई अन्य जानकारी है जो मैं प्रदान कर सकता हूं तो यह सहायक होगा कृपया मुझे बताएं। आपकी सहायता के लिए धन्यवाद.

अद्यतन

यहाँ मेरी फ़ोल्डर संरचना, सरल बनाया गया है:

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 द्वारा उत्पादित है! एमवीसीई उपलब्ध है। इस example repository

npm install

brunch build

public/js में app.js और vendor.js के आकार की तुलना करें (यकीन है कि यह npm install brunch -g साथ विश्व स्तर पर इंस्टॉल किया गया है)

1. क्लोन: इन निर्देशों का पालन करें। वे क्रमशः 744 केबी और 737 केबी होना चाहिए। App.js की सामग्री की जांच करें और लाइब्रेरी सामान नोट करें। रेगेक्स /^source\// के साथ मेरा files.javascripts.joinTo['js/app.js'] कैसा है?

Answer 1

समस्या joinTo और entryPoints के मिश्रण के कारण होती है।मुझे लगता है कि आपकी कॉन्फ़िगरेशन के साथ, आप पहले अपना कोड app.js और vendor.js में विभाजित करते हैं लेकिन app.jsentryPoints के आउटपुट द्वारा ओवरराइड हो जाता है।

विकल्प 1

entryPoints घोषणा निकालें:

इसे हल करने के लिए, आप विकल्पों में से एक चुनना है। यह सिर्फ आपके कोड को प्रदान किए गए RegEx के साथ विभाजित करेगा।

विकल्प 2

joinTo घोषणा निकालें और बदल entryPoints रहे हैं:

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

निष्कर्ष

यह बहुत ही मामले में, दोनों विकल्पों में से उत्पादन में ही है। लेकिन entryPoints के साथ कोड का विश्लेषण किया जाता है और केवल आवश्यक मॉड्यूल को बंडल किया जाता है। क्योंकि कोई अनावश्यक मॉड्यूल नहीं हैं, आकार समान है। अधिक जानकारी के लिए this issue देखें।