Google Chrome Developer Toolkit is Slow
I've had the same problem, tried the same solutions without luck, until I fired procmon and saw that Chrome was actually reading my entire Projects folder (which is several hundred thousand files worth).
There was a reference to that folder in the Workspace/Folders section in the dev tools Settings app. Removing the reference solved the problem.
This was solved by clearing my cache (temp files, cookies, etc) in Chrome. Not sure what the root cause was, but that fixed the problem.
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 beforebundle.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.