Provide mechanism to exclude Mirage from production build for create-react-app projects

Mirage and Faker are both included in the production bundles for create-react-app projects, ballooning the vendor package size. create-react-app does not expose a mechanism to register Webpack externals.

I’m working to investigate workarounds, but it would be nice to have a documented solution for this case because a large portion of the web community uses create-react-app.

For my use case, my gzipped vendor bundle is increased in size by over 420% when adding the Mirage server entry point.

File sizes after gzip:

  469.38 KB (+379.25 KB)  build/static/js/2.6b4bd9ed.chunk.js
  13.57 KB (+4.92 KB)     build/static/js/main.6d95a494.chunk.js
  814 B                   build/static/css/main.7fd419d7.chunk.css
  813 B                   build/static/js/runtime-main.0fd92631.js

[ghaagsma]

I have a workaround that utilizes code splitting. I simply asynchronously import my application’s Mirage server initialization module, causing the relevant dependencies and imports to be built into a separate bundle chunk. This chunk will not be requested in production.

I have not yet verified whether this is optimized in terms of Mirage/Faker/etc. all being packaged into the same bundle with no production dependencies, but it appears to greatly mitigate the issue.

Here is an excerpt from my index.tsx for anyone curious about how this looks in the application source.

  if (!isDevelopment()) {
    renderApplication();
    return;
  }

  /**
   * Asynchronously import Mirage dependencies so they are included in a
   * separate bundle that is never requested in production.
   *
   * See {@link https://create-react-app.dev/docs/code-splitting/} for
   * additional information.
   */
  const { initializeMirageServer } = await import('./mirage/server');
  initializeMirageServer();
  renderApplication();

[szmarci]

Hi @samselikoff,

I might completely misunderstand how this works, but my file structure looks like this:

index.js

if (process.env.NODE_ENV === 'development') {
  makeServer()
}

server.ts

export function makeServer({ environment = "development" } = {}) {
  let server = new Server({
      seeds(server) {
        server.db.loadData({
          data: data from faker
        })
      }
  })
}

When I build it like this, Mirage is not excluded from the bundle. I have to wrap new Server explicitly with ‘development’ to make it excluded from the bundle. server.ts

export function makeServer({ environment = "development" } = {}) {
  if (process.env.NODE_ENV === 'development') {
    let server = new Server({

    })
  }
}

And still, faker js data (that is referenced inside loadData, comes from a local npm package of mine) is still included in the final bundle. How does this works exactly?

Thanks for miragejs, awesome tool!