Maintain sane file sizes with webpack code splitting

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

As a Single Page Application grows in size, the size of the payload can become a real problem for performance. In this lesson, learn how to leverage code splitting to easily implement lazy loading for your application to load only the code necessary for a particular feature or functionality.

Peng SONG
Peng SONG
~ 5 years ago

What is the editor's name that you are using in this video?

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

It's called Atom. Here are the plugins I use: https://github.com/kentcdodds/ama/issues/113

Dan Hayden
Dan Hayden
~ 5 years ago

When using System.import webpack creates the correct bundles however when it attempts to load the bundle in the browser it tries to load it from the root directory and not the webpack output directory. Has anyone else had this problem or know how to fix it? Thanks

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

You probably need to set the output.publicPath.

Dan Hayden
Dan Hayden
~ 5 years ago

That worked! Thank you so much Kent 👍

Andrejb
Andrejb
~ 5 years ago

Thank you very much for this highly professional lessons! Your explanations are best on the planet, happy to extend the skills by this!

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

That's super nice of you to say! Thank you! I'm glad it's helpful!

Maxime
Maxime
~ 4 years ago

System import has already been deprecated...

https://webpack.js.org/guides/migrating/ "(Note on the deprecated System.import: webpack's use of System.import didn't fit the proposed spec, so it was deprecated in v2.1.0-beta.28 in favor of import())"

Kent C. Dodds
Kent C. Doddsinstructor
~ 4 years ago

Yep, thanks for adding that comment. Maybe eventually I'll get around to updating these. Luckily it's a pretty quick and simple change for people to make. Thanks!