Geekle Vue presentation Code splitting and lazy loading https://github.com/NorbertNader/vue-aws-starter-kit/

1. © 2021, Amazon Web Services, Inc. or its Affiliates.
Norbert Nader
Front-end Engineer @ Amazon Web Services
June 9, 2021
Vue.js
Code splitting and lazy loading

2. © 2021, Amazon Web Services, Inc. or its Affiliates.
The plan for this talk
• What is code splitting and lazy loading?
• Applying code splitting and lazy loading techniques in aVue.js app
• How can we measure performance?
• Moving aVue.js app to theAWS Cloud
• Takeaways
• Q&A

3. © 2021, Amazon Web Services, Inc. or its Affiliates.
Let’s get started!
What is code splitting and lazy loading?

4. © 2021, Amazon Web Services, Inc. or its Affiliates.
Webpack's definition of code splitting and lazy loading
“Code splitting is one of the most compelling features of webpack.
This feature allows you to split your code into various bundles which
can then be loaded on demand or in parallel. It can be used to
achieve smaller bundles and control resource load prioritization
which, if used correctly, can have a major impact on load time.”
https://webpack.js.org/guides/code-splitting
“Lazy, or "on demand", loading is a great way to optimize your site
or application. This practice essentially involves splitting your code
at logical breakpoints, and then loading it once the user has done
something that requires, or will require, a new block of code.This
speeds up the initial load of the application and lightens its overall
weight as some blocks may never even be loaded.”
https://webpack.js.org/guides/lazy-loading
index.js
bundle-0.js
bundle-1.js
bundle-2.js
index.js

5. © 2021, Amazon Web Services, Inc. or its Affiliates.
Code splitting
using the webpack config

6. © 2021, Amazon Web Services, Inc. or its Affiliates.
Code splitting CSS using MiniCssExtractPlugin

7. © 2021, Amazon Web Services, Inc. or its Affiliates.
Lazy loading
using dynamic imports

8. © 2021, Amazon Web Services, Inc. or its Affiliates.
Dynamically loading aVue.js component
Before
After

9. © 2021, Amazon Web Services, Inc. or its Affiliates.
How it’s done inVue.js

10. © 2021, Amazon Web Services, Inc. or its Affiliates.
Start with installingVue CLI
Instant Prototyping
Example

11. © 2021, Amazon Web Services, Inc. or its Affiliates.
Then install the dependencies
package.json

12. © 2021, Amazon Web Services, Inc. or its Affiliates.
Create aVue.js app
router.js app.js
App.vue

13. © 2021, Amazon Web Services, Inc. or its Affiliates.
Before code splitting
and lazy loading…

14. © 2021, Amazon Web Services, Inc. or its Affiliates.
Chrome DevTools

15. © 2021, Amazon Web Services, Inc. or its Affiliates.
Let’s add code splitting for CSS!
vue.config.js App.vue

16. © 2021, Amazon Web Services, Inc. or its Affiliates.
Let’s lazy load the routes!
router.js

17. © 2021, Amazon Web Services, Inc. or its Affiliates.
Let’s lazy load a component!
About.vue

18. © 2021, Amazon Web Services, Inc. or its Affiliates.
After code splitting
and lazy loading

19. © 2021, Amazon Web Services, Inc. or its Affiliates.
Chrome DevTools

20. © 2021, Amazon Web Services, Inc. or its Affiliates.
Chrome DevTools

21. © 2021, Amazon Web Services, Inc. or its Affiliates.
Prefetching and Preloading resources
vue.config.js About.vue
router.js

22. © 2021, Amazon Web Services, Inc. or its Affiliates.
Analyzing the bundles
vue.config.js

23. © 2021, Amazon Web Services, Inc. or its Affiliates.
Code splitting with SSR

24. © 2021, Amazon Web Services, Inc. or its Affiliates.
Install server renderer and express

25. © 2021, Amazon Web Services, Inc. or its Affiliates.
Install webpack plugins

26. © 2021, Amazon Web Services, Inc. or its Affiliates.
package.json

27. © 2021, Amazon Web Services, Inc. or its Affiliates.
vue.config.js

28. © 2021, Amazon Web Services, Inc. or its Affiliates.
app.js

29. © 2021, Amazon Web Services, Inc. or its Affiliates.
entry-server.js

30. © 2021, Amazon Web Services, Inc. or its Affiliates.
entry-client.js

31. © 2021, Amazon Web Services, Inc. or its Affiliates.
router.js

32. © 2021, Amazon Web Services, Inc. or its Affiliates.
server.js

33. © 2021, Amazon Web Services, Inc. or its Affiliates.
After code splitting
with SSR…

34. © 2021, Amazon Web Services, Inc. or its Affiliates.
Performance after SSR

35. © 2021, Amazon Web Services, Inc. or its Affiliates.
Performance after SSR

36. © 2021, Amazon Web Services, Inc. or its Affiliates.
Measuring performance

37. © 2021, Amazon Web Services, Inc. or its Affiliates.
Logging metrics
App.vue

38. © 2021, Amazon Web Services, Inc. or its Affiliates.
Moving your app
to the AWS Cloud

39. © 2021, Amazon Web Services, Inc. or its Affiliates.
Infrastructure
SSR function
CDN Assets (JS, CSS, etc.)
/log
Logs
Canaries
Brower request app page or logs
metrics
Metrics function
App endpoint
Client
Client assets
HTML generated on the
Node.js lambda
The generated html has script and
link tags pointing to asset
Point all traffic i.e. / to SSR
Put metrics e.g. TTI
Canaries hit page
Scripts returned from SSR fetch
code split bundles
User

40. © 2021, Amazon Web Services, Inc. or its Affiliates.
Install AWS CLI and SAM
https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html
https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-sam-cli-install-mac.html

41. © 2021, Amazon Web Services, Inc. or its Affiliates.
Create an Amazon S3 bucket for our assets

42. © 2021, Amazon Web Services, Inc. or its Affiliates.
Upload assets to our Amazon S3 bucket
asset-uploader.sh

43. © 2021, Amazon Web Services, Inc. or its Affiliates.
Point Amazon CloudFront to Amazon S3 bucket

44. © 2021, Amazon Web Services, Inc. or its Affiliates.
Create an OAI for Amazon CloudFront distribution

45. © 2021, Amazon Web Services, Inc. or its Affiliates.
Restrict access to private Amazon S3 bucket
cf-distribution.json

46. © 2021, Amazon Web Services, Inc. or its Affiliates.
Update Amazon S3 bucket policy
policy.json

47. © 2021, Amazon Web Services, Inc. or its Affiliates.
Update vue.config.js to point to Amazon CloudFront
vue.config.js

48. © 2021, Amazon Web Services, Inc. or its Affiliates.
Create a Node.js function with AWS Lambda
ssr-lambda.js template.yaml

49. © 2021, Amazon Web Services, Inc. or its Affiliates.
Testing AWS Lambda locally
package.json

50. © 2021, Amazon Web Services, Inc. or its Affiliates.
Deploying our app to production

51. © 2021, Amazon Web Services, Inc. or its Affiliates.
Production

52. © 2021, Amazon Web Services, Inc. or its Affiliates.
Logging metrics to Amazon CloudWatch
package.json
metrics-lambda.js

53. © 2021, Amazon Web Services, Inc. or its Affiliates.
Deploying the metrics AWS Lambda
template.yaml

54. © 2021, Amazon Web Services, Inc. or its Affiliates.
Update our logger
logger.js

55. © 2021, Amazon Web Services, Inc. or its Affiliates.
Setting up dashboards and alarms

56. © 2021, Amazon Web Services, Inc. or its Affiliates.
Running canaries

57. © 2021, Amazon Web Services, Inc. or its Affiliates.
CI/CD Pipeline
Develop code
Build and deploy Monitor and test

58. © 2021, Amazon Web Services, Inc. or its Affiliates.
Takeaways
• We learned what is code splitting and lazy loading
• We applied code splitting and lazy loading techniques in aVue.js app
• We learned how we can measure performance
• We moved aVue.js app to theAWS cloud

59. © 2021, Amazon Web Services, Inc. or its Affiliates.
Resources
• https://webpack.js.org/concepts
• https://cli.vuejs.org/guide/
• https://v3.vuejs.org/guide/introduction.html
• https://router.vuejs.org/guide/
• https://docs.aws.amazon.com
• https://www.npmjs.com/
• https://developer.mozilla.org/
• https://developers.google.com/web
• https://web.dev/
This project https://github.com/NorbertNader/vue-aws-starter-kit

60. © 2021, Amazon Web Services, Inc. or its Affiliates.
Q&A
Norbert Nader

61. © 2021, Amazon Web Services, Inc. or its Affiliates.
ThankYou!