Angular :: basic tuning performance

1. © 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved.
ทำไม App ช้า ๆ แก้หน่อยสิ !!

2. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 2

3. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 3
Tuning perfomance
Investigate
Fix
Measure

4. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 4
Code splitting
Preload strategy
Performance budget
Differential loading
Initial load time

5. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 5
Building

6. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 6
Building
Development build
$ng build
Production build
$ng build --prod

7. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 7
Dev vs. Prod build
Dev Prod
Environment environment.ts environment.prod.ts
Cache-busting Only image ref from css All build files
Source maps Generated Not generated
Extracted CSS Global CSS to .js To .css
Uglification No Yes
Bundling Yes Yes
AOT No Yes

8. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 8
Prod build :: Smaller & Faster
Dev Prod
Environment environment.ts environment.prod.ts
Cache-busting Only image ref from css All build files
Source maps Generated Not generated
Extracted CSS Global CSS to .js To .css
Uglification No Yes
Bundling Yes Yes
AOT No Yes

9. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 9
Building

10. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 10
Building with source maps
$npm install source-map-explorer --save-dev
$ng build --prod --source-map
https://angular.io/guide/deployment

11. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 11
Analyse sources

12. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 12
Analyse sources

13. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 13
Tips source maps
angular.json

14. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 14
Sentry
https://docs.sentry.io/platforms/javascript/sourcemaps/#uploading-source-maps-to-sentry

15. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 15
Sentry without source maps
https://docs.sentry.io/platforms/javascript/sourcemaps/#uploading-source-maps-to-sentry

16. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 16
ขอสวย ๆ กว่านี้หน่อยสิ

17. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 17
Sentry
https://docs.sentry.io/platforms/javascript/sourcemaps/#uploading-source-maps-to-sentry

18. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 18
เรื่องฮา ๆ แต่เจ็บ

19. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 19

20. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 20
Listing

21. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 21
Using trackBy in ngFor
Ensure only the list element that has changed
will be rendered (Not all)

22. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 22
Using trackBy in ngFor
Ensure only the list element that has changed
will be rendered (Not all)

23. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 23
Listing
Using ngFor directive
https://angular.io/api/common/NgForOf#ngForTrackBy

24. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 24
Common solution from Doc
Using ngFor + trackBy
https://angular.io/api/common/NgForOf#ngForTrackBy

25. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 25
ทำไมไม่ช่วยกูวะ !!

26. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 26
เร็วขึ้นนะ

27. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 27
แต่ไม่ต้องการให้
template render ใหม่ !!

28. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 28
ทำไมดีหว่า ?

29. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 29

30. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 30
Hard code ไปเลย แจ่ม !!

31. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 31
ไม่น่าเชื่อเร็วขึ้น 30-50% เป็นสุข

32. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 32
ได้แรงบัลดาลใจ

33. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 33
ไปค้นหา google ต่อ

34. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 34
กลับบ้านไปเขียน code

35. Meetup
© 2017 - 2018 Siam Chamnankit Company Limited. All rights reserved. 35
กลับบ้านไปเขียน code
เขียน test ด้วยนะ