Lazy loading

with Webpack 4.x

A short introduction to Webpack

A frontend bundler

A long time ago

<!-- index.html -->
<html>

    <!-- ... -->

    <script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
    <script src="bower_components/angular-file-upload/angular-file-upload.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    
    <script src="scripts/bootstrap.min.js"></script>
    <script src="scripts/filesize.js"></script>
    <script src="scripts/url.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/config.js"></script>
  </body>
</html>

Sometime ago

Still kind of Do It Yourself

painful: assets, paths, modes

+

Webpack

A full frontend development setup in one declarative file

With handsome features like:

zero conf, image importations, hot replacement, dev webserver, chunks, server rendering, eslint integration, ...

... & lazy loading!

Why lazy loading?

main.js

logo.svg

index.html

~ 280 Kb

With lazy loading

Let's show!

main.js

logo.svg

index.html

~ 116 Kb

heavy.js

~ 168 Kb

Conclusion

A lot of optimizations available!

 

Mainly relevant
for heavy web applications

 

Very easy to set up

with webpack

 

Bonus:
Webpack 4.x zero conf is very cool!

Human Talks lazy loading with webpack

By Thibault Friedrich

Human Talks lazy loading with webpack

  • 212
Loading comments...

More from Thibault Friedrich