大型前端设计平台性能优化实战：从 Fabric.js / Tiptap 重型依赖分包到 SWC 编译调优

1. 依赖审计与清理 (Bundle Analyzer)
   └── 剔除重复/遗留依赖，全量迁移 lodash-es 彻底消除未使用的代码
2. 动态异步加载与懒拆包 (Dynamic Import & Code Splitting)
   └── 将 Fabric.js 画布与 Tiptap 富文本隔离为按需 Chunk (ssr: false)
3. 编译链路升级 (Next.js SWC Compiler)
   └── 开启 optimizePackageImports 与模块化导入，削减编译与运行时开销
4. 渲染关键路径优化 (Critical CSS)
   └── 内联首屏核心 CSS，延迟加载非关键动画与次要主题样式

// ❌ 优化前：静态同步导入，直接打入首屏 Vendor Bundle
import { CanvasEditor } from '@/components/CanvasEditor';
import { RichTextEditor } from '@/components/RichTextEditor';
 
// ✅ 优化后：使用 next/dynamic 实现按需分包与客户端懒加载
import dynamic from 'next/dynamic';
 
const CanvasEditor = dynamic(
  () => import('@/components/CanvasEditor').then((mod) => mod.CanvasEditor),
  {
    ssr: false, // Canvas 依赖 DOM，禁用服务端预渲染
    loading: () => <div className="h-[600px] flex items-center justify-center bg-gray-50">画板引擎加载中...</div>,
  }
);
 
const RichTextEditor = dynamic(
  () => import('@/components/RichTextEditor').then((mod) => mod.RichTextEditor),
  {
    ssr: false,
    loading: () => <div className="h-32 bg-gray-50 animate-pulse rounded-md" />,
  }
);

// next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  // 开启包导入自动树摇与路径重写
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      'date-fns',
      '@radix-ui/react-icons',
      'lodash-es',
    ],
  },
  // 启用现代 SWC 压缩
  swcMinify: true,
  // 生产环境自动移除 console.log
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production' ? { exclude: ['error'] } : false,
  },
};
 
export default nextConfig;