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/images/icons/svg-paths/svg-paths.tsx | 77 +++++++++++++++++----- 1 file changed, 59 insertions(+), 18 deletions(-) (limited to 'src/components/atoms/images/icons') 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; -- cgit v1.2.3