Skip to content

Commit

Permalink
(refactor/docs): split out bundler perf optimizations
Browse files Browse the repository at this point in the history
- made a lot of iterations on the bundler perf section just to really
  make it explicit that it's optional, but honestly the best way to
  do that is to just take it out of the README entirely
  - now its still linked to in the README, but not attracting a lot
    of attention to itself
  - downside of this is of course that less people who need it actually
    see it, but better than turning off users early with lots of config
    - README is tiny though, so it should still be easily noticeable
    - and hopefully the big blue hyperlinked heading makes it easily
      noticeable as well, so that hopefully prunes the downside quite
      a bit
  • Loading branch information
agilgur5 committed Nov 25, 2019
1 parent f292580 commit 06f65d4
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 45 deletions.
49 changes: 4 additions & 45 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,52 +52,11 @@ npm install -D webworkify

See the [webpack.js](webpack.js) and [browserify.js](browserify.js) files for examples as to how one might configure for a different bundler.

## Bundler Performance Optimizations
## [Bundler Performance Optimizations](./docs/bundler-performance-optimizations.md)

**Please note**: this section is entirely _optional_, it is only for advanced users and not necessary to use this library.

Using `physijs-webpack` may bulk up your bundle by quite a bit, primarily because `physijs` depends on `ammo.js`, which is roughly ~1.2MB (minified) alone.
While caching of repeated builds will certainly speed up performance by quite a bit, we can use some other optimizations to further improve your bundler's performance.

### noParse

One of these is the `noParse` config option ([webpack](https://webpack.js.org/configuration/module/#modulenoparse)|[browserify](https://github.com/browserify/browserify#usage)) that instructs the bundler to skip parsing of certain files and is usually used as an optimization for large files (like `ammo.js`!).

With `webpack`, this optimization might look like:

```javascript
// ...
module.exports = {
// ...
module: {
// don't parse ammo
noParse: require.resolve('physijs-webpack/physijs/vendor/ammo.js')
},
// ...
}
```

And with the [`browserify` API](https://github.com/browserify/browserify#browserifyfiles--opts), this optimization might look like:

```javascript
const browserify = require('browserify')
// ...

browserify({
// ...
// don't parse ammo
noParse: [require.resolve('physijs-webpack/physijs/vendor/ammo.js')],
// ...
})
```

### other optimizations

If you are looking to speed up your build even further, you may want to look into configuring `externals` ([webpack](https://webpack.js.org/configuration/externals/)|[browserify](https://github.com/browserify/browserify#bexternalfile)) (and possibly configuring `ignore`s ([webpack](https://webpack.js.org/plugins/ignore-plugin/)|[browserify](https://github.com/browserify/browserify#bignorefile))).

You may also want to apply these same bundler performance optimizations to `three` as well, as it is also a fairly large library.

Please send a PR if you identify any other performance optimizations that you think may be useful to others!
Feeling like your builds are too slow?
Looking to speed them up?
Check out our [optimization docs](./docs/bundler-performance-optimizations.md)!

## Credits

Expand Down
46 changes: 46 additions & 0 deletions docs/bundler-performance-optimizations.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Bundler Performance Optimizations

**Please note**: this is entirely _optional_, it is only for advanced users and not necessary to use this library.

Using `physijs-webpack` may bulk up your bundle by quite a bit, primarily because `physijs` depends on `ammo.js`, which is roughly ~1.2MB (minified) alone.
While caching of repeated builds will certainly speed up performance by quite a bit, we can use some other optimizations to further improve your bundler's performance.

## noParse

One of these is the `noParse` config option ([webpack](https://webpack.js.org/configuration/module/#modulenoparse)|[browserify](https://github.com/browserify/browserify#usage)) that instructs the bundler to skip parsing of certain files and is usually used as an optimization for large files (like `ammo.js`!).

With `webpack`, this optimization might look like:

```javascript
// ...
module.exports = {
// ...
module: {
// don't parse ammo
noParse: require.resolve('physijs-webpack/physijs/vendor/ammo.js')
},
// ...
}
```

And with the [`browserify` API](https://github.com/browserify/browserify#browserifyfiles--opts), this optimization might look like:

```javascript
const browserify = require('browserify')
// ...

browserify({
// ...
// don't parse ammo
noParse: [require.resolve('physijs-webpack/physijs/vendor/ammo.js')],
// ...
})
```

## other optimizations

If you are looking to speed up your build even further, you may want to look into configuring `externals` ([webpack](https://webpack.js.org/configuration/externals/)|[browserify](https://github.com/browserify/browserify#bexternalfile)) (and possibly configuring `ignore`s ([webpack](https://webpack.js.org/plugins/ignore-plugin/)|[browserify](https://github.com/browserify/browserify#bignorefile))).

You may also want to apply these same bundler performance optimizations to `three` as well, as it is also a fairly large library.

Please send a PR if you identify any other performance optimizations that you think may be useful to others!

0 comments on commit 06f65d4

Please sign in to comment.