Want to know more about the JHipster's webpack configuration and how to improve your application performance using Lazy loading? Let's discover this together!

1. What’s new in Angular with
JHipster ?
William Marques - JHipster Conf

2. About me
William MARQUES
24 years old
JHipster Core Team Member
Java lover <3
Ippon Technologies
@wylmarq
Script lover <3

3. JHipster objectives
Keep the configuration simple
Provide the best practices
Make your production build as small as possible
Make your dev workflow fast

4. What did we do ?
1. Upgrade to Webpack 4
2. Setup Lazy Loading
3. Add some optimizations
4. Migrate to Jest

5. Webpack 4 upgrade

6. Upgrade to Webpack 4
Webpack 4 announced main features:
● Better performances => Faster build times
● Easier configuration
● Many others !

7. Build times
JHipster 4 (webpack 3.10.0) JHipster 5 (webpack 4.8.0)
yarn start (dev) 12s 7s
Incremental (dev) 2s 0.7s
yarn build (prod) 29s 49s
target/www size 3,6M 2,9M

8. Let’s explore Webpack !

9. Lazy Loading

10. Why Lazy Loading ?
Purpose: Render only what’s useful for the user
ie: A normal user shouldn’t have to wait for the admin module !
Results:
● Smaller files to load on application startup
● Faster loading

11. Why smaller files ?
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

12. How do I do that in Angular ?

13. Lazy Loading in Angular
Easy as 1, 2, 3 !
1. Make sure you don’t import same providers in many places
2. Use loadChildren in your route config
3. Remove your Module imports from AppModule

14. The importance of a Core Module
Angular will create one provider instance per Lazy Loaded Modules if your import
your providers into them.
This can be annoying if you think your providers as singletons !
Solution:
● Import your singletons providers in a Core Module
● Import this Core Module only in your App Module
A Core Module is already present in JHipster 5 !

15. Example Architecture
Core Module
App Module
(root)
Feature Module B
Shared Module
Feature Module A
Core Module Providers are accessibl
from Lazy Loaded Modules via the
root injection tree

16. JHipster Routing Module

17. Other optimizations

18. MomentJS Optimizations
Moment is an awesome library…
But it’s HUGE
By default, it includes all the locales
Source: https://bundlephobia.com/result?p=moment@2.22.2

19. MomentJS Optimizations
We used the moment-locales-plugin for Webpack
=> Keep only the used locales in your prod build !
Julien is happy now !

20. Font Awesome v5
Has been rewritten from scratch
Now uses SVG with JS instead of plain CSS
≈ 420kb minified !
≈ 3s to load on 3G

21. Font Awesome v5 in JHipster
Imports only the icons you need in the generated app in vendor.ts
Then Webpack does the magic tree shaking

22. Jest Migration

23. Jest vs Karma/Jasmine
Uses a Virtual DOM Uses a real browser
Run tests in parallel Run tests one by one
All In One (Runner, framework, coverage) One tool for each thing
Uses preprocessor Uses webpack

24. Jest Migration in JHipster
Remove webpack.test.js and karma.conf.js
Add Jest Config file from a fresh generated app
Use jest-codemods to migrate from Jasmine to Jest
See: https://facebook.github.io/jest/docs/en/migration-guide.html
JHipster PR: https://github.com/jhipster/generator-jhipster/pull/7663/files

25. Time Comparison

26. Time Comparison
First run 15s 37s
Second run 10s 37s

27. What about “real browser” tests ?
Jest uses a virtual DOM (jsdom) instead of a real browser
You can still have end-to-end tests with Protractor with various real browsers
The point of Unit Tests is to test your code, not the browser
TypeScript already compiles your code into ES5 so it will be compatible with most
browsers
https://caniuse.com/#feat=es5

28. Thank you !