如何减小NextJS应用打包体积？我的项目首屏包达1.5Mb

我刚创建了一个NextJS应用，首屏加载打包体积约1.5Mb——据我了解1.2Mb就已经属于偏大的范畴了。

我的应用所有页面均从数据库查询数据，目前以静态HTML形式渲染。我已经尝试了所有基础优化手段，比如对条件渲染组件使用ES6导入，但都没有效果。我怀疑问题出在所有页面都会提前从数据库获取数据（若这个判断有误请指正），但不确定具体该如何解决。

我知道可以通过useEffect在前端直接获取数据，但不确定这能否减小打包体积。恳请有NextJS使用经验的开发者帮忙查看项目并指出问题所在，谢谢！

PACKAGE.JSON #

"dependencies": {
    "@chakra-ui/react": "^2.3.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@next/bundle-analyzer": "^13.0.2",
    "dotenv": "^16.0.3",
    "framer-motion": "^7.6.5",
    "moralis-v1": "^1.11.0",
    "next": "latest",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-moralis": "^1.4.2",
    "react-redux": "^8.0.4",
    "web3uikit": "^0.1.159"
  },
  "devDependencies": {
    "@types/node": "17.0.35",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "file-loader": "^6.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.2",
    "typescript": "4.7.2",
    "url-loader": "^4.1.1"
  }
}

打包体积截图 #

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