[Bug] nextjs加载EditorLayout时间很慢

kemisstep commented 7 months ago

🐛 问题描述 | Bug Description

加载时间很长

kemisstep commented 7 months ago

ONLY-yours commented 7 months ago

是 build 部署后加载的情况么？我在 dev 场景下没有遇到

ONLY-yours commented 7 months ago

会不会是你给每一个 pannel 里面内容加载的时间太长了导致的？

kemisstep commented 7 months ago

是 build 部署后加载的情况么？我在 dev 场景下没有遇到

是开发环境，nextjs的ts环境下，直接使用示例项目，也是加载10s左右，太慢了

kemisstep commented 7 months ago

codesandbox 加载这个项目，直接提示空间不足

kemisstep commented 7 months ago

提供 packages.json

{
  "name": "next_tspage",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@ant-design/pro-editor": "^0.38.0",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@kanaries/react-beautiful-dnd": "^0.0.3",
    "@mui/icons-material": "^5.14.18",
    "@mui/joy": "^5.0.0-beta.15",
    "@mui/material": "^5.14.18",
    "@radix-ui/colors": "^3.0.0",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@reduxjs/toolkit": "^2.0.1",
    "@visactor/vtable": "^0.15.0",
    "ali-react-table": "ssh://git@github.com/a987607481/ali-react-table-x.git",
    "antd": "^5.12.8",
    "antd-style": "^3.6.1",
    "classnames": "^2.3.2",
    "echarts": "^5.4.3",
    "echarts-for-react": "^3.0.2",
    "immer": "^10.0.3",
    "lodash": "^4.17.21",
    "next": "13.5.6",
    "react": "^18",
    "react-activation": "^0.12.4",
    "react-dom": "^18",
    "react-grid-layout": "^1.4.4",
    "redux-persist": "^6.0.0",
    "styled-components": "^6.1.0",
    "typestyle": "^2.4.0",
    "use-immer": "^0.9.0"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.201",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "postcss": "^8",
    "sass": "^1.69.5",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

kemisstep commented 7 months ago

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 将纯 esm 模块转为 node 兼容模块,ProEditor使用
 reactStrictMode: false,
 transpilePackages: [
   '@ant-design/pro-editor',
   'zustand',
   'leva',
   'ahooks',
 ],
 swcMinify: true,
 trailingSlash: false,
 modularizeImports: {
   '@mui/icons-material': {
     transform: '@mui/icons-material/{{member}}',
   },
 },
 compiler: {
   // Enables the styled-components SWC transform
   styledComponents: true
 },
 images: {
   domains: ['localhost'],
   path: "/",
 },
}

module.exports = nextConfig

ONLY-yours commented 7 months ago

@kemisstep 能看下页面上怎么用的么？我完全使用了你的依赖，除了 ali-react-table 我用的标准包外，这是我的页面，测试下来没什么问题


"use client";

import { useTheme } from "antd-style";
import { EditorLayout } from "@ant-design/pro-editor";

export default function Home() {
  const theme = useTheme();
  return (
    <div
      style={{
        backgroundColor: theme.colorBgLayout,
      }}
    >
      <EditorLayout/>
    </div>
  );
}

kemisstep commented 7 months ago

这个加载后的，文件很大呀，有么又办法优化下

ant-design / pro-editor

[Bug] nextjs加载EditorLayout时间很慢 #144

🐛 问题描述 | Bug Description