Published on December 21, 2016 by Chrome

Using Webpack want to learn more about code splitting? Then check out this weeks Totally Tool Tips where Addy gives you his top tips and Matt, unhelpfully, questions it…..totes a webpack noob.

Links:
webpack Code Splitting: goo.gl/AHiBwn
webpack Code Splitting – Libraries: goo.gl/8QRh5N
PWAs with React.js: goo.gl/IX57NE

Watch more episodes of Totally Tooling Tips here: goo.gl/IoXka7?

Subscribe to the Chrome Developers channel at goo.gl/LLLNvf

Leave a Reply

14 Comments on "Code-splitting your way to better perf with Webpack in Totally Tooling Tips (S3, E15)"

Notify of
avatar

Brian Preis
Guest
Brian Preis
2 months 17 days ago

Is code-splitting the method of lazy-loading?

Noah Grant
Guest
Noah Grant
3 months 4 days ago

We recently implemented this very thing in the Sift Science console, and it's worked wonderfully! One last tip I would offer is to use github.com/soundcloud/chunk-manifest-webpack-plugin to keep your updated chunk hashes out of your entry file. Without this, when you update a chunk file, your entry file gets cache-busted as well because it has to know the updated chunk's new hash. I remember the speakers from Housing.com referencing this at Chrome Dev Summit this year.

Cory Maloy
Guest
Cory Maloy
3 months 12 days ago

I implemented code splitting on our enterprise app. We did it based by state, so each state has all the needed code per state and it gets lazy loaded when needed. Makes the app much more scalable, especially with single page applications (we use angular).

Jacob Johnson
Guest
Jacob Johnson
3 months 20 days ago

What does that skeletor sticker say?

Pascal Gula
Guest
Pascal Gula
4 months 4 days ago

Back to TTT, and shocked to see G is supporting React officially…

Jerry Liu
Guest
Jerry Liu
4 months 6 days ago

If you have multiple landing pages, and you don't want to calculate what their common chunks are, here is a simple POC on how to auto generate common chunks: github.com/liuyanghejerry/webpack-auto-index-demo

zakaria amine
Guest
zakaria amine
4 months 7 days ago

GWT framewok introduced code splitting long time ago ( Gmail was partly written in GWT)

Aabhas Arora
Guest
Aabhas Arora
4 months 7 days ago

Exactly what I needed, thanks 🙂

Thiago Brito de Lima
Guest
Thiago Brito de Lima
4 months 8 days ago

CommensChunkPlugin – I thought it very interesting to get the router's path separated in entry object having different properties as shown: P1, P2, P3 and so on and so on. I still didn't know that plugin.

Colin Fox
Guest
Colin Fox
4 months 8 days ago

At 6:00, your bitly link says "wepback-precache" instead of "webpack-precache".

Google Chrome Developers
Guest
Google Chrome Developers
4 months 7 days ago

Thanks! Just fixed it up.

wpDiscuz