Investigate why importing anything from '@faker-js/faker' directly causes all of faker to be bundled.

[ST-DDT]

Clear and concise description of the problem

Importing anything directly from @faker-js/faker causes the bundler to contain all of faker in the resulting bundle.

Reproduction:

https://github.com/faker-js/playground/blob/main/playgrounds/vite-cjs/src/App.vue

Add:

import { FakerError } from "@faker-js/faker";

const natureImageUrl = ref(faker.image.nature() + new FakerError("test"));

That will increase the bundle size from 0.6MB to 3.6MB.

Maybe try with sideEffect: false + refactorings.

Alternative

No response

Additional context

No response

[Shinigami92]

So to explain what a side effect is:

When a function modifies the state of something outside its scope, then it is declared as a side effect

For example:

faker/src/modules/helpers/unique.ts

Line 144 in 64f480d

store[result] = result;

faker/src/modules/helpers/unique.ts

Line 104 in 64f480d

store = GLOBAL_UNIQUE_STORE,

faker/src/modules/helpers/unique.ts

Line 9 in 64f480d

const GLOBAL_UNIQUE_STORE: Record<RecordKey, RecordKey> = {};

The helpers.unique function takes GLOBAL_UNIQUE_STORE as a default value and this is defined out of scope of the function itself, but is modified inside it in line 144.
So if the default is taken for unique, then the modification to GLOBAL_UNIQUE_STORE is a side effect.

---

I'm not aware of any other side effects right now

[ST-DDT]

Would moving this to a class field fix that issue?

[ST-DDT]

Team Decision

We will try to investigate this for v8.0

• Remove global unique store in favor of a faker (helperModule) instance bound one

[Shinigami92]

@xDivisionByZerox pointed made a hint in meeting 2023-04-20 that we could move the variable allLocales into the file src/locales/index.ts itself

faker/src/index.ts

Line 41 in bf67a21

export * as allLocales from './locales';

This should be tested and could work, so that when loading the file, no variable assignment will be made in src/index.ts itself, but only in the underlying file on demand

[Shinigami92]

@evanw could you help us with this bug?

Please checkout

git clone git@github.com:faker-js/faker.git
cd faker
pnpm install
pnpm run build

cd ..

git clone git@github.com:faker-js/playground.git
cd playground
git switch next
pnpm install
cd playgrounds/vite-cjs

pnpm run compile # 3759.57 KiB / gzip: 995.54 KiB

Open /playground/playgrounds/vite-cjs/src/App.vue

-   faker.image.urlLoremFlickr({ category: "nature" }) + new FakerError("test")
+   faker.image.urlLoremFlickr({ category: "nature" }) + new Error("test")

run pnpm run compile again, see difference in bundle size (618.70 KiB / gzip: 189.16 KiB)

[Shinigami92]

Moving this into Milestone v8 as we have decided that it is not blocking a release v8.0
Still a bug, but we need help e.g. from the community

[graniczny]

I just realised that faker is taking 3.6MB after build in React...
Imo its a critical issue, its way too big

[xDivisionByZerox]

Thats why we explicitly ask you to install our library as a Dev Dependency: https://fakerjs.dev/guide/#installation

Install it as a Dev Dependency using your favorite package manager.

There is also additional hints about this in the Usage Guide for the Browser: https://fakerjs.dev/guide/usage.html#browser

Note: Using the browser is great for experimenting 👍. However, due to all of the strings Faker uses to generate fake data, Faker is a large package. It's > 5 MiB minified. Please avoid deploying the full Faker in your web app.

[FredericHeem]

Faker version 5 is totally fine on the browser.

[ST-DDT]

You can also import a specific locale to avoid the bug.

import { faker } from '@faker-js/faker/locale/de';

https://fakerjs.dev/guide/localization.html#individual-localized-packages

[SalahAdDin]

Faker version 5 is totally fine on the browser.

It is super heavy.