Firebase部署报错HTTP Error:400 EntityTooLarge求助

推送特定代码文件至Firebase时部署失败，收到报错：

Error: HTTP Error: 400,

return (<Code>EntityTooLarge</Code>)

Your proposed upload is larger than the maximum object size specified in your Policy Document.Content-length exceeds upper bound on range。

已尝试移除未使用的包和图片、精简代码行数、使用Next.js的dynamic import按需加载Modal组件，但问题依旧；移除该特定代码后部署可成功。相关代码如下：

import React, { useState } from "react"
import dynamic from "next/dynamic"
const Modal = dynamic(() => import("react-bootstrap/Modal"))
const ActionButtonModal = dynamic(() => import("./ActionButtonModal"))
import { OnboardingDataType } from "./OnboardingScreen"
const OnboardPage = dynamic(() => import("./OnboardPage"))
import { useDispatch } from "react-redux"
import { toggleSlider } from "@shared/redux/actions/slider"
import ActionBtnList from "./ActionBtnList"
import PageList from "./PageList"

interface ButtonNavigationProps {
  onboardingData: OnboardingDataType
  setOnboardingData: (arg0: any) => void
  platform: string | undefined
}

const ModalPage: React.FC<ButtonNavigationProps> = props => {
  const { onboardingData, setOnboardingData, platform } = props
  const [showPageModal, setPageModal] = useState(false)
  const [showBtnModal, setBtnModal] = useState(false)
  const dispatch = useDispatch()
  const AddButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = ({
    className,
    children,
    ...btnProps
  }) => (
    <button
      {...btnProps}
      className={[
        "flex border w-fit rounded-3xl pl-6 pr-1 border-[#093959] items-center font-medium gap-2 focus:outline-none text-lg ",
        className,
      ].join(" ")}
    >
      {children ?? ""} <i className="fas text-2xl text-[#093959] fa-plus-circle"></i>
    </button>
  )

  const toggleBtnModal = (index: number | undefined) => {
    setBtnIndex(index)
    setBtnModal(!showBtnModal)
  }

  const togglePageModal = (index: number | undefined) => {
    setPageIndex(index)
    setPageModal(!showPageModal)
  }

  const showConfirmModal = (component: "pages" | "actionButton", index: number) => {
    dispatch(
      toggleSlider({
        key: "ConfirmModal",
        show: true,
        title: `Component will be deleted. Do you want to proceed?`,
        heading: `Remove ${component === "pages" ? "Page" : "Action Button"} ${index + 1}?`,
        onYes: () => {
          if (index !== null) {
            if (component === "pages") {
              deletePage(index)
              return
            } else {
              deleteActionBtn(index)
              return
            }
          }
        },
      })
    )
  }

  const deleteActionBtn = (btnIndex: number) => {
    if (btnIndex >= 0 && btnIndex < onboardingData.actionButtons.length) {
      const updatedButtonsArray = [...onboardingData.actionButtons]
      updatedButtonsArray.splice(btnIndex, 1)
      setOnboardingData({ ...onboardingData, actionButtons: updatedButtonsArray })
    }
  }

  const deletePage = (index: number) => {
    if (index >= 0 && index < onboardingData.pages.length && onboardingData.pages.length > 0) {
      const updatedPages = [...onboardingData.pages]
      updatedPages.splice(index, 1)
      setOnboardingData({ ...onboardingData, pages: updatedPages })
    }
  }

  const [BtnIndex, setBtnIndex] = useState<number | undefined>(undefined)
  const [pageIndex, setPageIndex] = useState<number | undefined>(undefined)

  return (
    <div className="max-w-3xl ">
      <Modal
        show={showPageModal}
        onHide={() => setPageModal(false)}
        centered
        contentClassName="bg-transparent w-full border-none"
        className=""
        dialogClassName="max-w-3xl my-0"
      >
        <OnboardPage
          pageIndex={pageIndex}
          platform={platform}
          toggleModal={togglePageModal}
          onboardingData={onboardingData}
          setOnboardingData={setOnboardingData}
        />
      </Modal>
      <PageList
        pages={onboardingData.pages}
        togglePageModal={togglePageModal}
        showConfirmModal={showConfirmModal}
      />
      <AddButton className="my-4 py-1" onClick={() => togglePageModal(undefined)}>
        {onboardingData.pages?.length > 0 ? "Add More Pages" : "Add Page"}
      </AddButton>
      <Modal
        show={showBtnModal}
        onHide={() => setBtnModal(false)}
        centered
        contentClassName="bg-transparent w-full border-none"
        className=""
        dialogClassName="max-w-2xl my-0"
      >
        <ActionButtonModal
          toggleModal={toggleBtnModal}
          pageData={onboardingData}
          selectedIndex={BtnIndex}
          setPageData={setOnboardingData}
        />
      </Modal>
      <ActionBtnList
        actionButtons={onboardingData.actionButtons}
        toggleBtnModal={toggleBtnModal}
        showConfirmModal={showConfirmModal}
      />
      {(onboardingData.actionButtons?.length < 2 || !onboardingData.actionButtons) && (
        <AddButton className="my-4 py-1" onClick={() => toggleBtnModal(undefined)}>
          {onboardingData.actionButtons?.length ? "Add More Action Buttons" : "Add Action Button"}
        </AddButton>
      )}
    </div>
  )
}

export default ModalPage

• 调整Firebase存储的对象大小限制：进入Firebase控制台，找到存储的规则配置，检查maxSize参数是否设置过小，将其调整为适配部署包的大小（比如设置为50MB）。
• 深度拆分组件依赖：虽然已用dynamic import，但react-bootstrap/Modal、ActionButtonModal或OnboardPage内部可能包含大量未按需加载的代码。可替换react-bootstrap的Modal为轻量自定义Modal，或对这两个子组件做更深层次的代码分割。
• 优化Next.js构建输出：在next.config.js中启用压缩并配置webpack拆分公共依赖：

  module.exports = {
    compress: true,
    webpack: (config, { isServer }) => {
      if (!isServer) {
        config.optimization.splitChunks.chunks = 'all'
      }
      return config
    }
  }
  

  这能减小单个chunk的体积，避免触发大小限制。
• 排查子组件的隐藏大资源：检查ActionButtonModal和OnboardPage是否间接引入大体积资源（如base64图片、未压缩的样式文件），移除或压缩这些资源。
• 配置Firebase分片上传：在firebase.json中添加分片上传相关配置，确保支持大文件上传：

  {
    "hosting": {
      "headers": [
        {"source": "**", "headers": [{"key": "Content-Length", "value": ""}]}
      ]
    }
  }
  

  需根据实际部署情况调整配置细节。

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