Next.js静态HTML导出后性能下降，如何优化加载性能？

针对静态导出后TBT升高、保留脚本时性能得分难以提升的问题，可尝试以下具体配置方案：

• 精细化配置Next.js静态导出
  在next.config.js中调整编译和资源优化规则，拆分代码块并压缩资源：

  module.exports = {
    output: 'export',
    experimental: {
      optimizeCss: true, // 自动优化CSS，移除未使用样式
      turboMode: true, // 加速编译并优化输出
    },
    compress: true, // 开启静态资源压缩
    webpack: (config) => {
      // 拆分第三方依赖为独立chunk，避免单个脚本过大
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          mui: {
            test: /[\\/]node_modules[\\/](@mui)[\\/]/,
            name: 'chunk-mui',
            priority: 10,
          },
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
            name: 'chunk-react',
            priority: 9,
          },
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'chunk-vendors',
            priority: 8,
          },
        },
      };
      return config;
    },
  };
  

• 按需加载MUI组件并延迟初始化
  仅加载用到的Popover组件，并用惰性加载延迟其脚本加载时机：

  import React, { lazy, Suspense } from 'react';
  // 仅导入Popover组件，而非整个MUI库
  const Popover = lazy(() => import('@mui/material/Popover'));
  
  // 组件中使用时，用Suspense包裹实现懒加载
  function App() {
    return (
      <div>
        {/* 其他无需JS的静态内容 */}
        <Suspense fallback={null}>
          <Popover 
            // Popover配置
          >
            {/* Popover内容 */}
          </Popover>
        </Suspense>
      </div>
    );
  }
  

  同时禁用MUI全局样式自动注入，手动导入必要样式以减少CSS体积：

  import { ThemeProvider, createTheme } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  // 仅导入Popover所需样式
  import '@mui/material/Popover/Popover.css';
  

• 进阶脚本加载策略
  不用全局给所有脚本加async/defer，而是用Next.js的next/script组件指定非关键脚本的加载时机：

  import Script from 'next/script';
  
  function App() {
    return (
      <>
        {/* 静态页面内容 */}
        {/* 非关键脚本（如MUI、Popover相关）在页面空闲时加载 */}
        <Script src="/_next/static/chunks/chunk-mui.js" strategy="lazyOnload" />
        <Script src="/_next/static/chunks/chunk-react.js" strategy="lazyOnload" />
      </>
    );
  }
  

  对于必须在交互时才用到的脚本，可绑定到用户操作事件触发加载：

  // 比如Popover的触发按钮点击时才加载脚本
  const handlePopoverTrigger = () => {
    if (!window.MUILoaded) {
      const script = document.createElement('script');
      script.src = '/_next/static/chunks/chunk-mui.js';
      script.onload = () => {
        window.MUILoaded = true;
        // 加载完成后再初始化Popover
        initPopover();
      };
      document.body.appendChild(script);
    } else {
      initPopover();
    }
  };
  

• 定位并优化阻塞源
  用Chrome DevTools的Performance面板录制页面加载过程，找到TBT的具体阻塞脚本：

  1. 查看哪个脚本的执行时间最长，针对性简化或延迟其执行逻辑；
  2. 若存在不必要的初始化代码，可将其延迟到页面加载完成后执行：

     window.addEventListener('load', () => {
       // 非关键初始化逻辑放在这里
     });
     

内容的提问来源于stack exchange，提问作者GEV