Thibault Friedrich
A
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?
Let's show!
github.com/friedrith/discover-webpack
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
