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
10 days 19 hours ago

Is code-splitting the method of lazy-loading?

Noah Grant
Guest
Noah Grant
28 days 18 hours 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
1 month 5 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
1 month 14 days ago

What does that skeletor sticker say?

Pascal Gula
Guest
Pascal Gula
1 month 29 days ago

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

Jerry Liu
Guest
Jerry Liu
2 months 4 hours 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
2 months 23 hours ago

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

Aabhas Arora
Guest
Aabhas Arora
2 months 1 day ago

Exactly what I needed, thanks 🙂

Thiago Brito de Lima
Guest
Thiago Brito de Lima
2 months 1 day 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
2 months 1 day ago

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

Google Chrome Developers
Guest
Google Chrome Developers
2 months 1 day ago

Thanks! Just fixed it up.

wpDiscuz