From 5a572163c5a5174c1620c578f550dd7ddc841df4 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 20 Dec 2023 12:40:48 +0100 Subject: build: improve bundle size * add `sideEffects` in package.json to activate tree shaking for barrel files * use dynamic imports on social links and icons * resize social media images * resize large project image (demo apcom) * resize website logo --- next.config.js | 1 + package.json | 4 ++ public/projects/demo-apcom.jpg | Bin 43798 -> 19755 bytes src/assets/images/armand-philippot-logo.svg | 49 ++++++++++--- src/assets/images/social-media/github.svg | 16 ++++- src/assets/images/social-media/gitlab.svg | 35 +++++++++- src/assets/images/social-media/linkedin.svg | 14 +++- src/assets/images/social-media/twitter.svg | 15 +++- .../atoms/images/icons/svg-paths/svg-paths.tsx | 77 ++++++++++++++++----- src/components/atoms/images/logo/logo.module.scss | 4 +- src/components/atoms/images/logo/logo.tsx | 17 +++-- .../atoms/links/social-link/social-link.tsx | 28 ++++++-- 12 files changed, 215 insertions(+), 45 deletions(-) diff --git a/next.config.js b/next.config.js index 02aa847..ff94748 100644 --- a/next.config.js +++ b/next.config.js @@ -174,6 +174,7 @@ const nextConfig = { const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true', + openAnalyzer: false, }); const overrideHTMLTags = () => (tree) => { diff --git a/package.json b/package.json index f1ba943..9945eec 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,10 @@ }, "private": true, "type": "module", + "sideEffects": [ + "*.scss", + "*.css" + ], "scripts": { "predev": "yarn run i18n:compile", "dev": "next dev", diff --git a/public/projects/demo-apcom.jpg b/public/projects/demo-apcom.jpg index fb3bc85..6ece1d5 100644 Binary files a/public/projects/demo-apcom.jpg and b/public/projects/demo-apcom.jpg differ diff --git a/src/assets/images/armand-philippot-logo.svg b/src/assets/images/armand-philippot-logo.svg index 225c6e1..dcb727c 100644 --- a/src/assets/images/armand-philippot-logo.svg +++ b/src/assets/images/armand-philippot-logo.svg @@ -1,5 +1,8 @@ - - + - - - - - - + + + + + + + diff --git a/src/assets/images/social-media/github.svg b/src/assets/images/social-media/github.svg index 861be58..307afd2 100644 --- a/src/assets/images/social-media/github.svg +++ b/src/assets/images/social-media/github.svg @@ -1 +1,15 @@ - \ No newline at end of file + + + + diff --git a/src/assets/images/social-media/gitlab.svg b/src/assets/images/social-media/gitlab.svg index 94c1f7a..7104de5 100644 --- a/src/assets/images/social-media/gitlab.svg +++ b/src/assets/images/social-media/gitlab.svg @@ -1 +1,34 @@ - \ No newline at end of file + + + + + + + + + diff --git a/src/assets/images/social-media/linkedin.svg b/src/assets/images/social-media/linkedin.svg index 9259989..2f3ece9 100644 --- a/src/assets/images/social-media/linkedin.svg +++ b/src/assets/images/social-media/linkedin.svg @@ -1 +1,13 @@ - \ No newline at end of file + + + + diff --git a/src/assets/images/social-media/twitter.svg b/src/assets/images/social-media/twitter.svg index 94dbe55..9a98139 100644 --- a/src/assets/images/social-media/twitter.svg +++ b/src/assets/images/social-media/twitter.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + + diff --git a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx index 88de5ef..97e4ea5 100644 --- a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx +++ b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx @@ -1,21 +1,62 @@ -import type { FC } from 'react'; -import { - ArrowIconPaths, - type ArrowOrientation, - CCBySAIconPaths, - CareerIconPaths, - CogIconPaths, - ComputerIconPaths, - EnvelopIconPaths, - FeedIconPaths, - HomeIconPaths, - MagnifyingGlassIconPaths, - MoonIconPaths, - PostsStackIconPaths, - SunIconPaths, - CrossIconPaths, - HelpIconPaths, -} from './icons-paths'; +import dynamic from 'next/dynamic'; +import type { ComponentType, FC } from 'react'; +import type { ArrowOrientation, ArrowProps } from './icons-paths'; + +const ArrowIconPaths: ComponentType = dynamic(async () => + import('./icons-paths').then((mod) => mod.ArrowIconPaths) +); + +const CCBySAIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.CCBySAIconPaths) +); + +const CareerIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.CareerIconPaths) +); + +const CogIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.CogIconPaths) +); + +const ComputerIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.ComputerIconPaths) +); + +const CrossIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.CrossIconPaths) +); + +const EnvelopIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.EnvelopIconPaths) +); + +const FeedIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.FeedIconPaths) +); + +const HelpIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.HelpIconPaths) +); + +const HomeIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.HomeIconPaths) +); + +const MagnifyingGlassIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.MagnifyingGlassIconPaths) +); + +const MoonIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.MoonIconPaths) +); + +const PostsStackIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.PostsStackIconPaths) +); + +const SunIconPaths = dynamic(async () => + import('./icons-paths').then((mod) => mod.SunIconPaths) +); export type SVGIconOrientation = ArrowOrientation; diff --git a/src/components/atoms/images/logo/logo.module.scss b/src/components/atoms/images/logo/logo.module.scss index beeb7ff..427e85b 100644 --- a/src/components/atoms/images/logo/logo.module.scss +++ b/src/components/atoms/images/logo/logo.module.scss @@ -18,11 +18,11 @@ .letter { fill: var(--color-fg-inverted); stroke: var(--color-primary-darker); - stroke-width: 5; + stroke-width: 1; } .letter-shadow { fill: var(--color-shadow-darker); stroke: var(--color-shadow-darker); - stroke-width: 5; + stroke-width: 1; } diff --git a/src/components/atoms/images/logo/logo.tsx b/src/components/atoms/images/logo/logo.tsx index 5c575a5..bf9c890 100644 --- a/src/components/atoms/images/logo/logo.tsx +++ b/src/components/atoms/images/logo/logo.tsx @@ -20,27 +20,30 @@ export const Logo: FC = ({ heading, ...props }) => ( {...props} className={styles.wrapper} role="img" - viewBox="0 0 512 512" + viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > {heading ? {heading} : null} - - + + ); diff --git a/src/components/atoms/links/social-link/social-link.tsx b/src/components/atoms/links/social-link/social-link.tsx index 1da1e7d..89ecee3 100644 --- a/src/components/atoms/links/social-link/social-link.tsx +++ b/src/components/atoms/links/social-link/social-link.tsx @@ -1,10 +1,28 @@ -import type { AnchorHTMLAttributes, FC } from 'react'; -import GithubIcon from '../../../../assets/images/social-media/github.svg'; -import GitlabIcon from '../../../../assets/images/social-media/gitlab.svg'; -import LinkedInIcon from '../../../../assets/images/social-media/linkedin.svg'; -import TwitterIcon from '../../../../assets/images/social-media/twitter.svg'; +import dynamic from 'next/dynamic'; +import type { + AnchorHTMLAttributes, + ComponentType, + FC, + SVGAttributes, +} from 'react'; import styles from './social-link.module.scss'; +const GithubIcon: ComponentType> = dynamic( + async () => import('../../../../assets/images/social-media/github.svg') +); + +const GitlabIcon: ComponentType> = dynamic( + async () => import('../../../../assets/images/social-media/gitlab.svg') +); + +const LinkedInIcon: ComponentType> = dynamic( + async () => import('../../../../assets/images/social-media/linkedin.svg') +); + +const TwitterIcon: ComponentType> = dynamic( + async () => import('../../../../assets/images/social-media/twitter.svg') +); + export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter'; export type SocialLinkProps = Omit< -- cgit v1.2.3