Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance: improve image loading #227

Draft
wants to merge 7 commits into
base: dev
Choose a base branch
from
Draft

Performance: improve image loading #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bb0d0fd
enhance: add lazy loading attribute to img in slideshow
jakerenzella Mar 18, 2022
a48b673
refactor: upgrade node version in docker images
jakerenzella Mar 18, 2022
e8a8017
new: add imagemin-webp-webpack-plugin
jakerenzella Mar 18, 2022
0faaba1
quality: remove trailing comma to adhere to eslint
jakerenzella Mar 18, 2022
12d2366
new: (WIP) add imagemin-webp-webpack-plugin
jakerenzella Mar 18, 2022
30ea181
refactor: update yarn lockfile
jakerenzella Mar 18, 2022
de4fc1e
enhance: use webp extension in slideshow
jakerenzella Mar 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Base image node to install Vue dependencies
FROM node:14.2 AS build-stage
FROM node:14.13.1 AS build-stage

WORKDIR /app

Expand All @@ -10,6 +10,6 @@ RUN yarn install
# Build dependencies into dist folder, copy line may change as we restructure
COPY . .
RUN yarn build
RUN npm install -g serve
RUN npm ci -g serve
ENTRYPOINT serve -s dist

4 changes: 2 additions & 2 deletions frontend/Dockerfile-dev
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# Base image node to install Vue dependencies
FROM node:14.2 AS build-stage
FROM node:14.13.1 AS build-stage

WORKDIR /app

# Install dependencies in separate step to cache
COPY package.json ./
RUN yarn install
RUN yarn install --frozen-lockfile

# Build dependencies into dist folder, copy line may change as we restructure
COPY . .
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"core-js": "^3.6.5",
"imagemin-webp-webpack-plugin": "^3.3.6",
"validator": "^13.1.1",
"vue": "^2.6.10",
"vue-router": "^3.3.4",
Expand Down
19 changes: 10 additions & 9 deletions frontend/src/views/Home/Slideshow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
v-for="banner in banners"
:key="banner.src"
:src="banner.src"
loading="lazy"
style="padding-left: 20px; padding-right: 20px;"
/>
</InfiniteSlideshow>
Expand All @@ -21,15 +22,15 @@ export default {
},
data: () => ({
banners: [
{ src: require('../../assets/slideshow/b1.png') },
{ src: require('../../assets/slideshow/b2.png') },
{ src: require('../../assets/slideshow/b3.png') },
{ src: require('../../assets/slideshow/b4.png') },
{ src: require('../../assets/slideshow/b5.png') },
{ src: require('../../assets/slideshow/b6.png') },
{ src: require('../../assets/slideshow/b7.png') },
{ src: require('../../assets/slideshow/b8.png') },
{ src: require('../../assets/slideshow/b9.jpg') }
{ src: require('../../assets/slideshow/b1.webp') },
{ src: require('../../assets/slideshow/b2.webp') },
{ src: require('../../assets/slideshow/b3.webp') },
{ src: require('../../assets/slideshow/b4.webp') },
{ src: require('../../assets/slideshow/b5.webp') },
{ src: require('../../assets/slideshow/b6.webp') },
{ src: require('../../assets/slideshow/b7.webp') },
{ src: require('../../assets/slideshow/b8.webp') },
{ src: require('../../assets/slideshow/b9.webp') }
]
})
};
Expand Down
20 changes: 19 additions & 1 deletion frontend/vue.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');

module.exports = {
configureWebpack: {
plugins: [
// Make sure that the plugin is after any plugins that add images
new ImageminWebpWebpackPlugin(['src/assets/*'], {
overrideExtension: true,
config: [
{
test: /\.(jpe?g|png|gif)/,
options: {
quality: 75
}
}
]
})
]
},
css: {
loaderOptions: {
scss: {
Expand All @@ -18,5 +36,5 @@ module.exports = {
}
},
historyApiFallback: false
},
}
};
Loading