Explore the idea behind code splitting and how it can help you break your code up into different bundles. Learn how this reduces the sizes of requests and loads only the data that is needed.
- [Instructor] Throughout these videos,…we've discussed how WebPack aims to optimize our code…for performance and for developer ergonomics.…By inlining CSS and images,…we can make our code faster.…With the Webpack config,…we can automate processes like transpiling.…Now that we understand the basics,…there may be situations where we want to use code splitting.…Code splitting allows you to break up your code…into different bundles.…This can be done using multiple entry points.…For example, if I have an application…that has an about us and a contact us page,…we can tell Webpack to create bundles for each of these,…and then only the resources necessary…for the page will be loaded.…
This reduces the size of the requests,…and if somebody visits the site…and only goes to the about page,…they won't load the contact us information.…Additionally, we can use Webpack…to create bundles for shared code and for vendor code.…This optimization is used widely,…so let's take a look at some examples in the next video.…
- What is webpack?
- Running webpack from the command line
- Setting up loaders
- Loading CSS
- Compiling SCSS
- Using webpack plugins
Skill Level Intermediate
Workflow Tools for Web Developerswith Christina Truong1h 13m Intermediate
1. What is webpack?
2. webpack Loaders
3. webpack and CSS
4. webpack Plugins
Next steps1m 1s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.