Branch: disabling the provider and javascript application

Question

I created two javascript packages from our project and application provider. I do this according to the recommendation of the documentation , as seen from this snippet from my brunch-config.js:

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

And in the end I have vendor.js and app.js. But check the file sizes:

Please note that app.js is more than vendor.js! This large size makes browsing slower than necessary. After checking the contents of app.js, it seemed to contain the lodash, React files, and other libraries that I expected to get from vendor.js. And vendor.js seems to contain the same libraries that I expect.

My question is: Why are libraries present in app.js? Why is app.js not referencing them from vendor.js?

Maybe I missed some part of the configuration. Here is my full brunch-config.js for your exam:

 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 } }; 

and in HTML I need the following files:

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

I tried to set an order object, but to no avail:

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

Here is my .json package:

 { "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" } } 

Another thought, could this have to do with using require instead of import ?

If there is any other information I can provide, this would be helpful, please let me know. Thank you for your help.

UPDATE

Here is my simplified folder structure:

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

Here's the output structure created by brunch build :

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

Debug it for yourself! MVCE available. Follow these instructions:

• Clone this sample repository
• npm install
• brunch build (make sure it is installed globally with npm install brunch -g )
• Compare the sizes of app.js and vendor.js in public/js . They should be 744 KB and 737 KB, respectively. Examine the contents of app.js and pay attention to the library material. Like my files.javascripts.joinTo['js/app.js'] , including this with regex /^source\// ?

Answer 1

The problem is caused by a mixture of joinTo and entryPoints . I assume that with your configuration, you will first split your code into app.js and vendor.js , but then app.js will be overridden by the entryPoints output.

To solve this problem, you need to choose one of the options:

Option 1

Remove the entryPoints ad. This will simply split your code along provided by RegEx.

Option 2

Remove the joinTo and change entryPoints to:

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

Conclusion

In this case, the output of both parameters is the same. But with entryPoints code is analyzed, and only the necessary modules are included. Since there are no extra modules, the size is the same. See this question for more details.