Skip to content

Add more performance optimizations #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alexander-sei wants to merge 1 commit into from
Closed

Add more performance optimizations #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 28 additions & 15 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,19 @@ aside,
contain: layout style paint;
}

/* Performance: use will-change sparingly and only on interactive elements */
.nextra-nav-container,
aside {
will-change: auto;
}

/* Performance: GPU acceleration for smooth transforms */
.nextra-callout,
.nextra-search-results {
transform: translateZ(0);
backface-visibility: hidden;
}

:root,
.light,
.light-theme {
Expand Down Expand Up @@ -306,72 +319,72 @@ aside,
}

/* Info callout (blue) */
.nextra-callout.x\\:border-blue-200 {
.nextra-callout.nx-border-blue-200 {
--callout-code-bg: rgba(59, 130, 246, 0.1);
border-color: rgba(59, 130, 246, 0.35) !important;
color: rgba(30, 58, 138, 0.88) !important;
}

.dark .nextra-callout.x\\:border-blue-200 {
.dark .nextra-callout.nx-border-blue-200 {
--callout-code-bg: rgba(147, 197, 253, 0.12);
border-color: rgba(147, 197, 253, 0.5) !important;
color: rgba(224, 242, 254, 0.96) !important;
}

.dark .nextra-callout.x\\:border-blue-200 svg {
.dark .nextra-callout.nx-border-blue-200 svg {
color: rgba(147, 197, 253, 0.92) !important;
}

/* Warning callout (yellow) */
.nextra-callout.x\\:border-yellow-100,
.nextra-callout.x\\:border-yellow-200 {
.nextra-callout.nx-border-yellow-100,
.nextra-callout.nx-border-yellow-200 {
--callout-code-bg: rgba(234, 179, 8, 0.1);
border-color: rgba(234, 179, 8, 0.42) !important;
color: rgba(113, 63, 18, 0.85) !important;
}

.dark .nextra-callout.x\\:border-yellow-100,
.dark .nextra-callout.x\\:border-yellow-200 {
.dark .nextra-callout.nx-border-yellow-100,
.dark .nextra-callout.nx-border-yellow-200 {
--callout-code-bg: rgba(253, 224, 71, 0.12);
border-color: rgba(253, 224, 71, 0.55) !important;
color: rgba(254, 249, 195, 0.96) !important;
}

.dark .nextra-callout.x\\:border-yellow-100 svg,
.dark .nextra-callout.x\\:border-yellow-200 svg {
.dark .nextra-callout.nx-border-yellow-100 svg,
.dark .nextra-callout.nx-border-yellow-200 svg {
color: rgba(253, 224, 71, 0.92) !important;
}

/* Error callout (red) */
.nextra-callout.x\\:border-red-200 {
.nextra-callout.nx-border-red-200 {
--callout-code-bg: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.35) !important;
color: rgba(127, 29, 29, 0.88) !important;
}

.dark .nextra-callout.x\\:border-red-200 {
.dark .nextra-callout.nx-border-red-200 {
--callout-code-bg: rgba(252, 165, 165, 0.12);
border-color: rgba(252, 165, 165, 0.5) !important;
color: rgba(254, 226, 226, 0.96) !important;
}

.dark .nextra-callout.x\\:border-red-200 svg {
.dark .nextra-callout.nx-border-red-200 svg {
color: rgba(252, 165, 165, 0.92) !important;
}

/* Default/orange callout */
.nextra-callout.x\\:border-orange-100 {
.nextra-callout.nx-border-orange-100 {
--callout-code-bg: rgba(234, 88, 12, 0.1);
border-color: rgba(234, 88, 12, 0.35) !important;
color: rgba(124, 45, 18, 0.85) !important;
}

.dark .nextra-callout.x\\:border-orange-100 {
.dark .nextra-callout.nx-border-orange-100 {
--callout-code-bg: rgba(253, 186, 116, 0.12);
border-color: rgba(253, 186, 116, 0.45) !important;
color: rgba(254, 237, 213, 0.96) !important;
}

.dark .nextra-callout.x\\:border-orange-100 svg {
.dark .nextra-callout.nx-border-orange-100 svg {
color: rgba(253, 186, 116, 0.92) !important;
}
1 change: 1 addition & 0 deletions content/evm/evm-hardhat.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ This tutorial will guide you through setting up Hardhat for Sei EVM development
<Callout emoji="🚀">

**Deploy to Testnet First**

It is <strong>highly recommended</strong> that you deploy to <em>testnet (atlantic-2)</em> first and verify everything works as expected before committing to mainnet. Doing so helps you catch bugs early, avoid unnecessary gas costs, and keep your users safe.

</Callout>
Expand Down
90 changes: 85 additions & 5 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,26 @@ export default withNextra({
productionBrowserSourceMaps: false,
compress: true,
turbopack: {},
poweredByHeader: false,
reactStrictMode: true,
experimental: {
optimizePackageImports: ['@tabler/icons-react', '@radix-ui/themes', 'sonner', 'viem']
optimizePackageImports: ['@tabler/icons-react', '@radix-ui/themes', 'sonner', 'viem', 'nextra-theme-docs'],
webpackBuildWorker: true,
parallelServerCompiles: true,
parallelServerBuildTraces: true
},
compiler: {
removeConsole: process.env.NODE_ENV === 'production',
reactRemoveProperties: process.env.NODE_ENV === 'production' ? { properties: ['^data-test$', '^data-testid$', '^data-cy$'] } : false
},
modularizeImports: {
'@tabler/icons-react': {
transform: '@tabler/icons-react/dist/esm/icons/{{member}}'
}
},
images: {
unoptimized: false,
formats: ['image/avif', 'image/webp'],
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
remotePatterns: [
{
Expand All @@ -48,21 +59,90 @@ export default withNextra({
}
]
},
webpack: (config, { dev, isServer }) => {
// Production optimizations
if (!dev) {
config.optimization = {
...config.optimization,
moduleIds: 'deterministic',
minimize: true,
usedExports: true,
sideEffects: true,
concatenateModules: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
// Framework chunk for React/Next.js
framework: {
name: 'framework',
chunks: 'all',
test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types|use-sync-external-store)[\\/]/,
priority: 40,
enforce: true
},
// Nextra and theme
nextra: {
name: 'nextra',
chunks: 'all',
test: /[\\/]node_modules[\\/](nextra|nextra-theme-docs)[\\/]/,
priority: 35,
enforce: true
},
// UI libraries
ui: {
name: 'ui',
chunks: 'all',
test: /[\\/]node_modules[\\/](@radix-ui|sonner)[\\/]/,
priority: 30,
enforce: true
},
// Icons
icons: {
name: 'icons',
chunks: 'all',
test: /[\\/]node_modules[\\/]@tabler[\\/]icons-react[\\/]/,
priority: 25,
enforce: true
},
// Common chunks
commons: {
name: 'commons',
minChunks: 2,
priority: 20
}
},
maxInitialRequests: 25,
minSize: 20000
}
};
}

return config;
},
async headers() {
return [
{
source: '/_next/static/css/(.*)',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=3600, immutable' },
{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=3600, immutable' },
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=31536000, immutable' },
{ key: 'X-Robots-Tag', value: 'noindex' }
]
},
{
source: '/_next/static/js/(.*)',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=31536000, immutable' }
]
},
{
source: '/_next/static/(.*)',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=3600, immutable' },
{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=3600, immutable' }
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' },
{ key: 'Vercel-CDN-Cache-Control', value: 'public, max-age=31536000, immutable' }
]
},
{
Expand Down
21 changes: 20 additions & 1 deletion postcss.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,26 @@ const config = {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: { preset: ['default', { discardComments: { removeAll: true } }] } } : {})
...(process.env.NODE_ENV === 'production'
? {
cssnano: {
preset: [
'default',
{
discardComments: { removeAll: true },
reduceIdents: true,
mergeLonghand: true,
mergeRules: true,
minifyFontValues: true,
minifyGradients: true,
normalizeWhitespace: true,
colormin: true,
calc: false
}
]
}
}
: {})
}
};

Expand Down