build: smaller bundle size for websites

This commit is contained in:
iCrawl
2022-11-28 05:55:08 +01:00
parent 2f4bfedca1
commit 31e67c4316
24 changed files with 199 additions and 97 deletions

View File

@@ -48,7 +48,37 @@ const rootDir = new URL('../../', import.meta.url);
export default defineConfig({
integrations: [
react(),
mdx(),
mdx({
remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],
rehypePlugins: [
rehypeSlug,
[
rehypeAutolinkHeadings,
{
properties: {
class:
'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
},
behavior: 'after',
group: ({ tagName }: { tagName: string }) =>
h('div', {
class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
tabIndex: -1,
}),
content: (heading: Node) => [
h(
`span.anchor-icon`,
{
ariaHidden: 'true',
},
LinkIcon,
),
createSROnlyLabel(toString(heading)),
],
},
],
],
}),
image({
serviceEntryPoint: '@astrojs/image/sharp',
}),
@@ -62,35 +92,6 @@ export default defineConfig({
compress(),
],
markdown: {
remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],
rehypePlugins: [
rehypeSlug,
[
rehypeAutolinkHeadings,
{
properties: {
class:
'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
},
behavior: 'after',
group: ({ tagName }: { tagName: string }) =>
h('div', {
class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
tabIndex: -1,
}),
content: (heading: Node) => [
h(
`span.anchor-icon`,
{
ariaHidden: 'true',
},
LinkIcon,
),
createSROnlyLabel(toString(heading)),
],
},
],
],
extendDefaultPlugins: true,
syntaxHighlight: false,
},
@@ -109,7 +110,6 @@ export default defineConfig({
'ariakit-utils/system': fileURLToPath(new URL('node_modules/ariakit-utils/esm/system.js', rootDir)),
'react-icons/fi': fileURLToPath(new URL('node_modules/react-icons/fi/index.esm.js', rootDir)),
'react-icons/vsc': fileURLToPath(new URL('node_modules/react-icons/vsc/index.esm.js', rootDir)),
'react-use': fileURLToPath(new URL('node_modules/react-use/esm/index.js', rootDir)),
},
},
},

View File

@@ -36,24 +36,20 @@
},
"homepage": "https://discord.js.org",
"dependencies": {
"@astrojs/image": "^0.11.6",
"@astrojs/mdx": "^0.12.0",
"@astrojs/react": "^1.2.2",
"@code-hike/mdx": "^0.7.4",
"@discordjs/ui": "workspace:^",
"ariakit": "^2.0.0-next.41",
"cmdk": "^0.1.20",
"meilisearch": "^0.29.1",
"react": "^18.2.0",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-use": "^17.4.0",
"sharp": "^0.31.2",
"shiki": "^0.11.1"
"react-use": "^17.4.0"
},
"devDependencies": {
"@astrojs/image": "^0.11.6",
"@astrojs/mdx": "^0.12.0",
"@astrojs/prefetch": "^0.1.1",
"@astrojs/react": "^1.2.2",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "16.18.3",
@@ -80,6 +76,8 @@
"prettier-plugin-tailwindcss": "^0.2.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-slug": "^5.1.0",
"sharp": "^0.31.2",
"shiki": "^0.11.1",
"typescript": "^4.9.3",
"unocss": "^0.46.5",
"vercel": "^28.5.6",

View File

@@ -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;",
},
};
});

View File

@@ -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",

View File

@@ -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;

View File

@@ -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() {

View File

@@ -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';

View File

@@ -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';

View File

@@ -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';

View File

@@ -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';

View File

@@ -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';

View File

@@ -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';

View File

@@ -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() {

View File

@@ -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';

View File

@@ -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>;

View File

@@ -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,

View File

@@ -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';

View File

@@ -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';

View File

@@ -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';