Google Chrome Developer Toolkit is Slow

Question

I have been using Google Chrome\'s dev tool kit (element inspection, stack trace, javascript debugging, etc.) for some time with great success.

However, about two weeks

Answer 1

I have had the same problem.

My Problem was, that i used browserify to create a large bundle (~92k lines) width SOURCEMAP. browserify app.js -d -o bundle.js.

I solved it by splitting my bundle.js.

I exported all node modules into a seperate file (modules.js) by adding --require [module name]:

browserify -r react -r lodash -r three > build/modules.js

and then create the bundle.js without the outsourced modules by adding --external [module name].

browserify -t babelify -x react -x lodash -x three src/app.js > build/bundle.js

(-t babelify, because i used react/JSX in my project.)

NOTE: You have to include module.js in your html before bundle.js.

My bundle.js shrinked from ~92000 to ~26000 lines ;-)

EDIT: To create a bundle without external modules (node_modules) you can also use --no-bundle-external instead of [-x NODE_MODULE_NAME]*.

EDIT #2: When you are using an module in your project that contains many submodules, -r|-x [MAIN_MODULE_NAME] won't require|exclude the submodules.

Example with react-bootstrap:

react-bootstrap contains many submodules, react-bootstrap/lib/[submodule].

browserify -r react-bootstrap > build/modules.js won't require for example the Button (react-bootstrap/lib/Button) module. So...

...if you are using

browserify --no-bundle-external src/app.js > build/bundle.js

...you wont't be able to use Button in your app, because --no-bundle-external excludes all node modules, including submodules. So don't forget to require all necessary submodules to:

browserify -r react-bootstrap -r react-bootstrap/lib/Button > build/modules.js

NOTE: Additionally, to increase the performance you can use exorcist to put the sourcemap into a separate file. Install it with:

npm install --save-dev exorcist

and change your browserify command:

browserify --no-bundle-external src/app.js | exorcist build/bundle.js.map > build/bundle.js

Thanks to smhg for the hint with excorcist. And show his answer for more details.