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 --- .../atoms/links/social-link/social-link.tsx | 28 ++++++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) (limited to 'src/components/atoms/links') 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