Not fixable warning on build

When i’m trying to build my app for web. It does succeed, but i’m having warning that i
can’t really fix by myself such as :

expo build:web
[====================] 100% (73.6 seconds)

Compiled with warnings.

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  ./fonts/MaterialCommunityIcons.ttf (503 KiB)
  static/js/app.7cdde456.chunk.js (492 KiB)
  static/js/2.b451d84a.chunk.js (1.74 MiB)
  static/js/2.b451d84a.chunk.js.gz (530 KiB)

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.22 MiB)
      static/js/runtime~app.efa64587.js
      static/js/2.b451d84a.chunk.js
      static/js/app.7cdde456.chunk.js

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/

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

The issue is when your CI treat warnings as errors :

$ expo build:web
- Making sure project is set up correctly...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

How can i possibly fix this ?

1 Like

Hi, louis.

I found workaround. The size limit warning is set by webpack. (doc) The default limit is 250000 bytes, so, let customize it.

First, generate webpack.config.js with expo customize:web command.
(doc)
Unfortunately, there is a possibility that the current version (3.0.10) of expo-cli has a bug and cannot execute the above command (already fixed in master branch). If you encounter this error, you can take the following steps instead of the original method.

  1. install @expo/webpack-config
  2. create webpack.config.js file at next ‘Second’ step

Second, edit the webpack.config.js as below.

  const createExpoWebpackConfigAsync = require('@expo/webpack-config');
  
  module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    // Customize the config before returning it.
+
+   config.performance = {
+     ...config.performance,
+     maxAssetSize: 550000,
+   };
+
    return config;
  };

This setting should extend the size limit to 550000 bytes and resolve the issue.

1 Like