javascript - How to reduce NextJs bundle size? - Stack Overflow

admin管理员组

文章数量:1316680

I've just created my NextJS app, and the first load bundle size is about 1.5Mb. This is my first time using Nextjs, and from what I understand 1.2Mb is incredibly massive. I've attached an image of the yarn build and also of my package.json.

All pages in my app query from a database, and right now the pages are rendering as static html.

I've tried all the basic stuff, such as using ES6 imports(for ponents rendered conditionally), but none of that is working. I believe that the issue lies in that all my pages are first fetching data from the database (if I'm wrong please correct me), however I'm not too sure how to fix that.

I know I can fetch data directly from front end using useEffect, however I don't know if that will reduce the build size.

If someone has experience with NextJs, I'd really appreciate it if they could look at my project and let me know where I'm going wrong.

Thanks!

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"
  }
}

Bundle:

I've just created my NextJS app, and the first load bundle size is about 1.5Mb. This is my first time using Nextjs, and from what I understand 1.2Mb is incredibly massive. I've attached an image of the yarn build and also of my package.json.

All pages in my app query from a database, and right now the pages are rendering as static html.

I've tried all the basic stuff, such as using ES6 imports(for ponents rendered conditionally), but none of that is working. I believe that the issue lies in that all my pages are first fetching data from the database (if I'm wrong please correct me), however I'm not too sure how to fix that.

I know I can fetch data directly from front end using useEffect, however I don't know if that will reduce the build size.

If someone has experience with NextJs, I'd really appreciate it if they could look at my project and let me know where I'm going wrong.

Thanks!

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"
  }
}

Bundle:

• javascript
• reactjs
• next.js
• rendering

Share Improve this question Follow asked Nov 9, 2022 at 12:06 ethereumboyethereumboy 14111 gold badge11 silver badge77 bronze badges 1

• Have a look at First Load JS shared by all is rather heavy in next.js for suggestions on how to check what's contributing to that bundle size. – juliomalves Commented Nov 13, 2022 at 11:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

This likely won't be the biggest factor in your bundle size, but one easy thing to change is to switch from react to preact. It reduced the JS bundle size by ~30% for the landing page of this Cloud GPU site that I've been working on.

Steps:

1. Install preact:

npm i preact

2. Update nextjs config:

const nextConfig = {
  // Put other setting here
  webpack: (config, { isServer }) => {
    if (!isServer) {
      Object.assign(config.resolve.alias, {
        'react': 'preact/pat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/pat',
      })
    }
    return config
  },
}
module.exports = nextConfig

3. Build

npm run build # or npx next build

you can do it before running build mend next.config.js and putting this output: "standalone" into the config file. will show on the project dir .next/standalone and easily reduce your NextJS bundle size.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "standalone",
}

module.exports = nextConfig

本文标签： javascriptHow to reduce NextJs bundle sizeStack Overflow