Vue presentation

© 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

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

Let’s get started!
What is code splitting and lazy loading?

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

Code splitting
using the webpack config

Code splitting CSS using MiniCssExtractPlugin

Lazy loading
using dynamic imports

Dynamically loading aVue.js component
Before
After

How it’s done inVue.js

Start with installingVue CLI
Instant Prototyping
Example

Then install the dependencies
package.json

Create aVue.js app
router.js app.js
App.vue

Before code splitting
and lazy loading…

Chrome DevTools

Let’s add code splitting for CSS!
vue.config.js App.vue

Let’s lazy load the routes!
router.js

Let’s lazy load a component!
About.vue

After code splitting
and lazy loading

Prefetching and Preloading resources
vue.config.js About.vue
router.js

Analyzing the bundles
vue.config.js

Code splitting with SSR

Install server renderer and express

Install webpack plugins

package.json

vue.config.js

app.js

entry-server.js

entry-client.js

router.js

server.js

After code splitting
with SSR…

Performance after SSR

Measuring performance

Logging metrics
App.vue

Moving your app
to the AWS Cloud

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

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

Create an Amazon S3 bucket for our assets

Upload assets to our Amazon S3 bucket
asset-uploader.sh

Point Amazon CloudFront to Amazon S3 bucket

Create an OAI for Amazon CloudFront distribution

Restrict access to private Amazon S3 bucket
cf-distribution.json

Update Amazon S3 bucket policy
policy.json

Update vue.config.js to point to Amazon CloudFront
vue.config.js

Create a Node.js function with AWS Lambda
ssr-lambda.js template.yaml

Testing AWS Lambda locally
package.json

Deploying our app to production

Production

Logging metrics to Amazon CloudWatch
package.json
metrics-lambda.js

Deploying the metrics AWS Lambda
template.yaml

Update our logger
logger.js

Setting up dashboards and alarms

Running canaries

CI/CD Pipeline
Develop code
Build and deploy Monitor and test

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

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

Q&A
Norbert Nader

ThankYou!

Vue presentation

Recommended

More Related Content

What's hot (20)

Similar to Vue presentation (20)

Recently uploaded (20)

Vue presentation