Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to make your webpack
builds 10x faster
Torsten Rüter
CTO & Co-Founder at Pixsy
React Native & Elm
Twitter: @trueterbs
Github: trueter
Photo: Jeremy Thomas
Reduce webpack scope
Use css-loader < 0.15
Use caching
https://github.com/babel/babel-loader
Use HappyPack
https://github.com/amireh/happypack/pull/15
Use DLL Bundles
Using DLL Bundles
• Two build steps
• 1. Create static assets
• 2. Create hot assets
• Use environment variable to differe...
Gotcha:
Webpack Isomorphic Tools
Hacks
https://github.com/webpack/webpack/pull/2210
The calypso hack
https://github.com/Automattic/wp-calypso/pull/4195
And suddenly
If you’re still having issues
twitter.com/trueterbs
github.com/trueter
Thanks to
• quicksnap
• halt-hammerzeit
• amireh
• jvpr
• SimenB
And to you
Questions?
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x faster
Upcoming SlideShare
Loading in …5
×

How to make your Webpack builds 10x faster

20,594 views

Published on

Sharing my slides on a talk I held at the Berlin-based FullStack JS meetup. Tips and tricks how I reduced our build time (full / incremental) from 60s / 4s to 8s / 300ms.

Full config:
https://gist.github.com/trueter/0e861403e59a9e27a476f3ad7ada1a89

Give us a visit at http://www.pixsy.com

Published in: Engineering

How to make your Webpack builds 10x faster

  1. 1. How to make your webpack builds 10x faster
  2. 2. Torsten Rüter CTO & Co-Founder at Pixsy React Native & Elm Twitter: @trueterbs Github: trueter Photo: Jeremy Thomas
  3. 3. Reduce webpack scope
  4. 4. Use css-loader < 0.15
  5. 5. Use caching
  6. 6. https://github.com/babel/babel-loader
  7. 7. Use HappyPack
  8. 8. https://github.com/amireh/happypack/pull/15
  9. 9. Use DLL Bundles
  10. 10. Using DLL Bundles • Two build steps • 1. Create static assets • 2. Create hot assets • Use environment variable to differentiate
  11. 11. Gotcha: Webpack Isomorphic Tools
  12. 12. Hacks
  13. 13. https://github.com/webpack/webpack/pull/2210
  14. 14. The calypso hack
  15. 15. https://github.com/Automattic/wp-calypso/pull/4195
  16. 16. And suddenly
  17. 17. If you’re still having issues twitter.com/trueterbs github.com/trueter
  18. 18. Thanks to • quicksnap • halt-hammerzeit • amireh • jvpr • SimenB
  19. 19. And to you
  20. 20. Questions?

×