`npx frontity build` returns bundle error of "asset size limit"

🙋Get Help
1

Hello, if you can help me with the size limit error, that’ll be great.

I’m trying to build my frontity project with the command of npx frontity build.
After I run the command it returned the following error:

asset size limit: The following asset(s) exceed the recommended size limit (488 KiB).
This can impact web performance.
Assets: 
  images/hero-background-7c33b6572a611159c2203fea721df2c9.png (1.64 MiB)

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Building module bundle

asset size limit: The following asset(s) exceed the recommended size limit (488 KiB).
This can impact web performance.
Assets: 
  images/hero-background-7c33b6572a611159c2203fea721df2c9.png (1.64 MiB)

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

The URL shows the Dynamic Imports using require.ensure. Should I create webpack.config.js in the root of Frontity project? Where should I add the code of src/index.js that has a getComponent() function?

FYI, this is how my src/index/js looks like:

export default {
  name: "my-custom-theme",
  roots: {
    theme: Root,
  },
  state: {
    theme: {
      isMenuOpen: false,
    },
  },
  actions: {
    theme: {},
  },
};

Thank you!

2

Hi @misakimichy

It looks like it’s the .png file which is large. Is this actually stopping the build with an error, or is it just a warning during the build process? Try reducing the file size of the .png file using an online tool like https://tinypng.com/ or a locally installed tool like https://imagemagick.org/.

Also check that the pixel dimensions of your images are not larger than they need to be.

So there’s two factors to consider here. One is the actual image size in pixels, convert your image to the maximum size it needs to be, so for example if the max-width property of your page is 960px your images never need to be greater than 960px in the x-dimension.

The second factor is the file size of your image files. Once you’ve determined the necessary pixel dimensions of your image the file can be compressed further to reduce the size of the file so that download times are shorter.

1 Like
3

I used tinypng.com and swapped the .png file with the compressed one.
After that, the building with npx frontity build command finished running successfully.

Thank you, @mburridge for your help.

1 Like