facebook / create-react-app
File Size

The distribution of size of files (measured in lines of code).

Intro
  • File size measurements show the distribution of size of files.
  • Files are classified in four categories based on their size (lines of code): 1-100 (very small files), 101-200 (small files), 201-500 (medium size files), 501-1000 (long files), 1001+(very long files).
  • It is a good practice to keep files small. Long files may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
Learn more...
File Size Overall
  • There are 47 files with 2,617 lines of code.
    • 0 very long files (0 lines of code)
    • 1 long files (937 lines of code)
    • 1 medium size files (239 lines of codeclsfd_ftr_w_mp_ins)
    • 3 small files (368 lines of code)
    • 42 very small files (1,073 lines of code)
0% | 35% | 9% | 14% | 41%
Legend:
1001+
501-1000
201-500
101-200
1-100


explore: zoomable circles | sunburst | 3D view
File Size per Extension
1001+
501-1000
201-500
101-200
1-100
js0% | 43% | 11% | 16% | 28%
css0% | 0% | 0% | 0% | 100%
applescript0% | 0% | 0% | 0% | 100%
html0% | 0% | 0% | 0% | 100%
tsx0% | 0% | 0% | 0% | 100%
yml0% | 0% | 0% | 0% | 100%
yaml0% | 0% | 0% | 0% | 100%
mjs0% | 0% | 0% | 0% | 100%
ts0% | 0% | 0% | 0% | 100%
toml0% | 0% | 0% | 0% | 100%
File Size per Logical Decomposition
primary
1001+
501-1000
201-500
101-200
1-100
packages/create-react-app0% | 96% | 0% | 0% | 3%
packages/eslint-config-react-app0% | 0% | 76% | 0% | 23%
docusaurus/website0% | 0% | 0% | 70% | 30%
packages/babel-preset-react-app0% | 0% | 0% | 55% | 44%
tasks0% | 0% | 0% | 0% | 100%
packages/cra-template-typescript0% | 0% | 0% | 0% | 100%
packages/cra-template0% | 0% | 0% | 0% | 100%
packages/react-dev-utils0% | 0% | 0% | 0% | 100%
packages/react-scripts0% | 0% | 0% | 0% | 100%
packages/babel-plugin-named-asset-import0% | 0% | 0% | 0% | 100%
packages/confusing-browser-globals0% | 0% | 0% | 0% | 100%
ROOT0% | 0% | 0% | 0% | 100%
packages/react-error-overlay0% | 0% | 0% | 0% | 100%
Longest Files (Top 47)
File# lines# units
createReactApp.js
in packages/create-react-app
 937 22
index.js
in packages/eslint-config-react-app
 239 -
create.js
in packages/babel-preset-react-app
 144 2
docusaurus.config.js
in docusaurus/website
 118 -
index.js
in docusaurus/website/src/pages
 106 -
cra.js
in tasks
 100 -
openChrome.applescript
in packages/react-dev-utils
 83 -
index.js
in packages/babel-plugin-named-asset-import
 83 5
dependencies.js
in packages/babel-preset-react-app
 76 1
webpackDevServer.config.js
in packages/react-scripts/config
 63 5
index.js
in packages/confusing-browser-globals
 61 -
custom.css
in docusaurus/website/src/css
 61 -
jest.js
in packages/eslint-config-react-app
 44 -
index.js
in packages/create-react-app
 36 -
styles.module.css
in docusaurus/website/src/pages
 35 -
App.css
in packages/cra-template/template/src
 33 -
App.css
in packages/cra-template-typescript/template/src
 33 -
31 -
base.js
in packages/eslint-config-react-app
 30 -
27 -
22 -
App.tsx
in packages/cra-template-typescript/template/src
 21 -
index.html
in packages/cra-template/template/public
 20 -
App.js
in packages/cra-template/template/src
 20 -
index.html
in packages/cra-template-typescript/template/public
 20 -
webpack-overrides.js
in packages/babel-preset-react-app
 17 2
reportWebVitals.ts
in packages/cra-template-typescript/template/src
 13 -
index.html
in packages/react-scripts/fixtures/kitchensink/template/public
 12 -
reportWebVitals.js
in packages/cra-template/template/src
 12 -
index.js
in packages/cra-template/template/src
 12 -
index.css
in packages/cra-template/template/src
 12 -
index.tsx
in packages/cra-template-typescript/template/src
 12 -
index.css
in packages/cra-template-typescript/template/src
 12 -
mjs
inline.mjs
in packages/react-error-overlay/fixtures
 9 -
mjs
junk-inline.mjs
in packages/react-error-overlay/fixtures
 9 -
test.js
in packages/confusing-browser-globals
 8 -
7 -
index.js
in packages/babel-preset-react-app
 6 1
test.js
in packages/babel-preset-react-app
 5 1
prod.js
in packages/babel-preset-react-app
 5 1
dev.js
in packages/babel-preset-react-app
 5 1
jest.integration.config.js
in packages/react-scripts/fixtures/kitchensink/template
 5 -
4 -
mjs
inline.es6.mjs
in packages/react-error-overlay/fixtures
 4 -
jest.transform.js
in packages/react-scripts/fixtures/kitchensink/template
 3 -
setupTests.js
in packages/cra-template/template/src
 1 -
setupTests.ts
in packages/cra-template-typescript/template/src
 1 -
Files With Most Units (Top 10)
File# lines# units
createReactApp.js
in packages/create-react-app
 937 22
webpackDevServer.config.js
in packages/react-scripts/config
 63 5
index.js
in packages/babel-plugin-named-asset-import
 83 5
webpack-overrides.js
in packages/babel-preset-react-app
 17 2
create.js
in packages/babel-preset-react-app
 144 2
test.js
in packages/babel-preset-react-app
 5 1
index.js
in packages/babel-preset-react-app
 6 1
prod.js
in packages/babel-preset-react-app
 5 1
dev.js
in packages/babel-preset-react-app
 5 1
dependencies.js
in packages/babel-preset-react-app
 76 1
Files With Long Lines (Top 4)

There are 4 files with lines longer than 120 characters. In total, there are 12 long lines.

File# lines# units# long lines
createReactApp.js
in packages/create-react-app
 937 22 7
index.js
in docusaurus/website/src/pages
 106 - 3
mjs
inline.mjs
in packages/react-error-overlay/fixtures
 9 - 1
mjs
junk-inline.mjs
in packages/react-error-overlay/fixtures
 9 - 1
Correlations

File Size vs. Commits (all time): 47 points

docusaurus/website/docusaurus.config.js x: 7 commits (all time) y: 118 lines of code packages/create-react-app/createReactApp.js x: 77 commits (all time) y: 937 lines of code docusaurus/website/src/css/custom.css x: 4 commits (all time) y: 61 lines of code packages/eslint-config-react-app/index.js x: 74 commits (all time) y: 239 lines of code tasks/cra.js x: 7 commits (all time) y: 100 lines of code packages/react-scripts/config/webpackDevServer.config.js x: 34 commits (all time) y: 63 lines of code packages/eslint-config-react-app/jest.js x: 4 commits (all time) y: 44 lines of code tasks/screencast-start.js x: 2 commits (all time) y: 7 lines of code packages/eslint-config-react-app/base.js x: 8 commits (all time) y: 30 lines of code packages/create-react-app/index.js x: 36 commits (all time) y: 36 lines of code packages/react-scripts/fixtures/kitchensink/template/jest.transform.js x: 2 commits (all time) y: 3 lines of code azure-pipelines.yml x: 12 commits (all time) y: 31 lines of code netlify.toml x: 4 commits (all time) y: 4 lines of code packages/babel-preset-react-app/create.js x: 39 commits (all time) y: 144 lines of code packages/cra-template-typescript/template/src/reportWebVitals.ts x: 2 commits (all time) y: 13 lines of code packages/cra-template/template/src/App.js x: 2 commits (all time) y: 20 lines of code docusaurus/website/src/pages/index.js x: 6 commits (all time) y: 106 lines of code packages/babel-preset-react-app/dependencies.js x: 16 commits (all time) y: 76 lines of code packages/cra-template-typescript/template/src/index.tsx x: 6 commits (all time) y: 12 lines of code tasks/verdaccio.yaml x: 4 commits (all time) y: 27 lines of code packages/babel-plugin-named-asset-import/index.js x: 4 commits (all time) y: 83 lines of code packages/babel-preset-react-app/index.js x: 35 commits (all time) y: 6 lines of code packages/babel-preset-react-app/webpack-overrides.js x: 2 commits (all time) y: 17 lines of code packages/cra-template-typescript/template/src/App.tsx x: 3 commits (all time) y: 21 lines of code packages/react-dev-utils/openChrome.applescript x: 6 commits (all time) y: 83 lines of code docusaurus/website/src/pages/styles.module.css x: 2 commits (all time) y: 35 lines of code packages/cra-template-typescript/template/src/App.css x: 2 commits (all time) y: 33 lines of code packages/cra-template-typescript/template/src/index.css x: 1 commits (all time) y: 12 lines of code packages/react-scripts/fixtures/kitchensink/template/jest.integration.config.js x: 1 commits (all time) y: 5 lines of code tasks/screencast.js x: 1 commits (all time) y: 22 lines of code packages/confusing-browser-globals/index.js x: 1 commits (all time) y: 61 lines of code packages/confusing-browser-globals/test.js x: 1 commits (all time) y: 8 lines of code
937.0
lines of code
  min: 1.0
  average: 55.68
  25th percentile: 8.0
  median: 20.0
  75th percentile: 61.0
  max: 937.0
0 77.0
commits (all time)
min: 1.0 | average: 9.36 | 25th percentile: 2.0 | median: 3.0 | 75th percentile: 6.0 | max: 77.0

File Size vs. Contributors (all time): 47 points

docusaurus/website/docusaurus.config.js x: 6 contributors (all time) y: 118 lines of code packages/create-react-app/createReactApp.js x: 45 contributors (all time) y: 937 lines of code docusaurus/website/src/css/custom.css x: 3 contributors (all time) y: 61 lines of code packages/eslint-config-react-app/index.js x: 45 contributors (all time) y: 239 lines of code tasks/cra.js x: 7 contributors (all time) y: 100 lines of code packages/react-scripts/config/webpackDevServer.config.js x: 23 contributors (all time) y: 63 lines of code packages/eslint-config-react-app/jest.js x: 3 contributors (all time) y: 44 lines of code tasks/screencast-start.js x: 2 contributors (all time) y: 7 lines of code packages/eslint-config-react-app/base.js x: 5 contributors (all time) y: 30 lines of code packages/create-react-app/index.js x: 23 contributors (all time) y: 36 lines of code packages/react-scripts/fixtures/kitchensink/template/jest.transform.js x: 2 contributors (all time) y: 3 lines of code azure-pipelines.yml x: 8 contributors (all time) y: 31 lines of code netlify.toml x: 4 contributors (all time) y: 4 lines of code packages/babel-preset-react-app/create.js x: 21 contributors (all time) y: 144 lines of code packages/cra-template-typescript/template/src/reportWebVitals.ts x: 2 contributors (all time) y: 13 lines of code packages/cra-template/template/src/App.js x: 1 contributors (all time) y: 20 lines of code docusaurus/website/src/pages/index.js x: 6 contributors (all time) y: 106 lines of code packages/babel-preset-react-app/dependencies.js x: 8 contributors (all time) y: 76 lines of code packages/cra-template-typescript/template/src/index.tsx x: 5 contributors (all time) y: 12 lines of code tasks/verdaccio.yaml x: 2 contributors (all time) y: 27 lines of code packages/babel-plugin-named-asset-import/index.js x: 4 contributors (all time) y: 83 lines of code packages/babel-preset-react-app/dev.js x: 3 contributors (all time) y: 5 lines of code packages/babel-preset-react-app/index.js x: 21 contributors (all time) y: 6 lines of code packages/babel-preset-react-app/webpack-overrides.js x: 2 contributors (all time) y: 17 lines of code packages/cra-template-typescript/template/src/App.tsx x: 3 contributors (all time) y: 21 lines of code packages/react-dev-utils/openChrome.applescript x: 5 contributors (all time) y: 83 lines of code packages/cra-template-typescript/template/public/index.html x: 2 contributors (all time) y: 20 lines of code docusaurus/website/src/pages/styles.module.css x: 2 contributors (all time) y: 35 lines of code packages/cra-template-typescript/template/src/App.css x: 2 contributors (all time) y: 33 lines of code packages/cra-template-typescript/template/src/index.css x: 1 contributors (all time) y: 12 lines of code packages/react-scripts/fixtures/kitchensink/template/jest.integration.config.js x: 1 contributors (all time) y: 5 lines of code packages/confusing-browser-globals/index.js x: 1 contributors (all time) y: 61 lines of code packages/confusing-browser-globals/test.js x: 1 contributors (all time) y: 8 lines of code
937.0
lines of code
  min: 1.0
  average: 55.68
  25th percentile: 8.0
  median: 20.0
  75th percentile: 61.0
  max: 937.0
0 45.0
contributors (all time)
min: 1.0 | average: 6.3 | 25th percentile: 2.0 | median: 2.0 | 75th percentile: 5.0 | max: 45.0

File Size vs. Commits (30 days): 3 points

docusaurus/website/docusaurus.config.js x: 2 commits (30d) y: 118 lines of code packages/create-react-app/createReactApp.js x: 1 commits (30d) y: 937 lines of code docusaurus/website/src/css/custom.css x: 1 commits (30d) y: 61 lines of code
937.0
lines of code
  min: 61.0
  average: 372.0
  25th percentile: 61.0
  median: 118.0
  75th percentile: 937.0
  max: 937.0
0 2.0
commits (30d)
min: 1.0 | average: 1.33 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 2.0 | max: 2.0

File Size vs. Contributors (30 days): 3 points

docusaurus/website/docusaurus.config.js x: 2 contributors (30d) y: 118 lines of code packages/create-react-app/createReactApp.js x: 1 contributors (30d) y: 937 lines of code docusaurus/website/src/css/custom.css x: 1 contributors (30d) y: 61 lines of code
937.0
lines of code
  min: 61.0
  average: 372.0
  25th percentile: 61.0
  median: 118.0
  75th percentile: 937.0
  max: 937.0
0 2.0
contributors (30d)
min: 1.0 | average: 1.33 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 2.0 | max: 2.0

File Size vs. Commits (90 days): 4 points

docusaurus/website/docusaurus.config.js x: 2 commits (90d) y: 118 lines of code packages/create-react-app/createReactApp.js x: 1 commits (90d) y: 937 lines of code docusaurus/website/src/css/custom.css x: 1 commits (90d) y: 61 lines of code packages/eslint-config-react-app/index.js x: 1 commits (90d) y: 239 lines of code
937.0
lines of code
  min: 61.0
  average: 338.75
  25th percentile: 75.25
  median: 178.5
  75th percentile: 762.5
  max: 937.0
0 2.0
commits (90d)
min: 1.0 | average: 1.25 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 1.75 | max: 2.0

File Size vs. Contributors (90 days): 4 points

docusaurus/website/docusaurus.config.js x: 2 contributors (90d) y: 118 lines of code packages/create-react-app/createReactApp.js x: 1 contributors (90d) y: 937 lines of code docusaurus/website/src/css/custom.css x: 1 contributors (90d) y: 61 lines of code packages/eslint-config-react-app/index.js x: 1 contributors (90d) y: 239 lines of code
937.0
lines of code
  min: 61.0
  average: 338.75
  25th percentile: 75.25
  median: 178.5
  75th percentile: 762.5
  max: 937.0
0 2.0
contributors (90d)
min: 1.0 | average: 1.25 | 25th percentile: 1.0 | median: 1.0 | 75th percentile: 1.75 | max: 2.0