build: smaller bundle size for websites

apps/website/next.config.js

@@ -1,10 +1,15 @@
 /* eslint-disable tsdoc/syntax */
 import { fileURLToPath } from 'node:url';
+import bundleAnalyzer from '@next/bundle-analyzer';
+
+const withBundleAnalyzer = bundleAnalyzer({
+	enabled: process.env.ANALYZE === 'true',
+});
 
 /**
  * @type {import('next').NextConfig}
  */
-export default {
+export default withBundleAnalyzer({
 	reactStrictMode: true,
 	eslint: {
 		ignoreDuringBuilds: true,
@@ -20,4 +25,4 @@ export default {
 		dangerouslyAllowSVG: true,
 		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
 	},
-};
+});

apps/website/package.json

@@ -5,11 +5,12 @@
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"build:local": "yarn run --top-level docs --force && cross-env NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
+		"build:local": "yarn run --top-level docs --force && cross-env-shell NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
 		"build:prod": "yarn workspaces foreach -ptR run build && yarn build:css && yarn build:next",
 		"build:next": "next build",
 		"build:css": "yarn generate:css",
 		"build:search_indicies": "yarn node scripts/generateAllIndicies.js",
+		"build:analyze": "yarn run --top-level docs --force && cross-env-shell ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
 		"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
 		"dev:next": "next dev",
 		"dev:css": "yarn generate:css --watch",
@@ -46,6 +47,7 @@
 		"@discordjs/ui": "workspace:^",
 		"@microsoft/api-extractor-model": "7.24.0",
 		"@microsoft/tsdoc": "0.14.1",
+		"@react-icons/all-files": "^4.1.0",
 		"@vercel/og": "^0.0.21",
 		"@vscode/codicons": "^0.0.32",
 		"ariakit": "^2.0.0-next.41",
@@ -58,7 +60,6 @@
 		"react": "^18.2.0",
 		"react-custom-scrollbars-2": "^4.5.0",
 		"react-dom": "^18.2.0",
-		"react-icons": "^4.6.0",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-use": "^17.4.0",
 		"rehype-ignore": "^1.0.3",
@@ -71,6 +72,7 @@
 		"swr": "^1.3.0"
 	},
 	"devDependencies": {
+		"@next/bundle-analyzer": "^13.0.5",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/node": "16.18.3",

apps/website/src/app/docs/packages/[package]/page.tsx

@@ -1,6 +1,8 @@
+import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
+import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
+import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
-import { VscArrowLeft, VscArrowRight, VscVersions } from 'react-icons/vsc';
 import { PACKAGES } from '~/util/constants';
 
 export const dynamicParams = false;

apps/website/src/app/docs/packages/page.tsx

@@ -1,5 +1,7 @@
+import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
+import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
+import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
 import Link from 'next/link';
-import { VscArrowLeft, VscArrowRight, VscPackage } from 'react-icons/vsc';
 import { PACKAGES } from '~/util/constants';
 
 async function getData() {

apps/website/src/app/page.tsx

@@ -1,6 +1,6 @@
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
 import Image from 'next/image';
 import Link from 'next/link';
-import { FiExternalLink } from 'react-icons/fi';
 import vercelLogo from '../assets/powered-by-vercel.svg';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 import { CODE_EXAMPLE } from '~/util/constants';

apps/website/src/components/CmdK.tsx

@@ -1,20 +1,18 @@
 'use client';
 
 import type { ApiItemKind } from '@microsoft/api-extractor-model';
+import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
+import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
+import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
+import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
+import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
+import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
 import { Dialog } from 'ariakit/dialog';
 import { Command } from 'cmdk';
 import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import {
-	VscArrowRight,
-	VscSymbolClass,
-	VscSymbolEnum,
-	VscSymbolField,
-	VscSymbolInterface,
-	VscSymbolMethod,
-	VscSymbolProperty,
-	VscSymbolVariable,
-} from 'react-icons/vsc';
 import { useKey } from 'react-use';
 import { useCmdK } from '~/contexts/cmdK';
 import { client } from '~/util/search';

apps/website/src/components/CodeListing.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils';
+import { FiLink } from '@react-icons/all-files/fi/FiLink';
 import type { PropsWithChildren } from 'react';
-import { FiLink } from 'react-icons/fi';
 import { HyperlinkedText } from './HyperlinkedText';
 import { InheritanceText } from './InheritanceText';
 import { TSDoc } from './tsdoc/TSDoc';

apps/website/src/components/DocContainer.tsx

@@ -8,18 +8,16 @@ import type {
 	ApiInterfaceJSON,
 } from '@discordjs/api-extractor-utils';
 import { Section } from '@discordjs/ui';
-import type { ReactNode } from 'react';
+import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
+import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
+import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
+import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
+import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
 import { Fragment, type PropsWithChildren } from 'react';
+import type { ReactNode } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-2';
-import {
-	VscSymbolClass,
-	VscSymbolMethod,
-	VscSymbolEnum,
-	VscSymbolInterface,
-	VscSymbolVariable,
-	VscListSelection,
-	VscSymbolParameter,
-} from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { HyperlinkedText } from './HyperlinkedText';
 import { SyntaxHighlighter } from './SyntaxHighlighter';

apps/website/src/components/Header.tsx

@@ -1,12 +1,15 @@
 'use client';
 
+import { FiCommand } from '@react-icons/all-files/fi/FiCommand';
+import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
+import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
+import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
+import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
 import { Button } from 'ariakit/button';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { Fragment, useEffect, useMemo, useState } from 'react';
-import { FiCommand } from 'react-icons/fi';
-import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
 import { useCmdK } from '~/contexts/cmdK';
 import { useNav } from '~/contexts/nav';
 

apps/website/src/components/MethodItem.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
+import { FiLink } from '@react-icons/all-files/fi/FiLink';
+import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
+import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { useCallback, useMemo, useState } from 'react';
-import { FiLink } from 'react-icons/fi';
-import { VscChevronDown, VscVersions } from 'react-icons/vsc';
 import { HyperlinkedText } from './HyperlinkedText';
 import { InheritanceText } from './InheritanceText';
 import { ParameterTable } from './ParameterTable';

apps/website/src/components/PackageSelect.tsx

@@ -1,8 +1,9 @@
+import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
+import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useMemo } from 'react';
-import { VscPackage, VscChevronDown } from 'react-icons/vsc';
 import { PACKAGES } from '~/util/constants';
 
 export function PackageSelect() {

apps/website/src/components/Sections.tsx

@@ -7,8 +7,10 @@ import type {
 	ApiConstructorJSON,
 } from '@discordjs/api-extractor-utils';
 import { Section } from '@discordjs/ui';
+import { VscSymbolConstant } from '@react-icons/all-files/vsc/VscSymbolConstant';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
 import { useMemo } from 'react';
-import { VscSymbolConstant, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { MethodList } from './MethodList';
 import { ParameterTable } from './ParameterTable';

apps/website/src/components/SidebarItems.tsx

@@ -2,17 +2,15 @@
 
 import type { getMembers } from '@discordjs/api-extractor-utils';
 import { Section } from '@discordjs/ui';
+import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
+import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
+import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
+import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useMemo, useState, useEffect } from 'react';
-import {
-	VscSymbolClass,
-	VscSymbolEnum,
-	VscSymbolInterface,
-	VscSymbolField,
-	VscSymbolVariable,
-	VscSymbolMethod,
-} from 'react-icons/vsc';
 import { useNav } from '~/contexts/nav';
 
 type Members = ReturnType<typeof getMembers>;

apps/website/src/components/TableOfContentItems.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import type { ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
+import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
 import { useMemo } from 'react';
-import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
 
 export function TableOfContentItems({
 	methods,

apps/website/src/components/VersionSelect.tsx

@@ -1,8 +1,9 @@
+import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
+import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useMemo } from 'react';
-import { VscVersions, VscChevronDown } from 'react-icons/vsc';
 import useSWR from 'swr';
 import { fetcher } from '~/util/fetcher';
 

apps/website/src/components/model/Enum.tsx

@@ -2,8 +2,8 @@
 
 import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
 import { Section } from '@discordjs/ui';
+import { VscSymbolEnumMember } from '@react-icons/all-files/vsc/VscSymbolEnumMember';
 import { Fragment } from 'react';
-import { VscSymbolEnumMember } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
 import { DocContainer } from '../DocContainer';

apps/website/src/components/model/Function.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import type { ApiFunctionJSON } from '@discordjs/api-extractor-utils';
+import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
+import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { useState } from 'react';
-import { VscChevronDown, VscVersions } from 'react-icons/vsc';
 import { DocContainer } from '../DocContainer';
 import { ParametersSection } from '../Sections';