# The Next.js App Bundles
> Learn how Next.js splits your app code into separate JavaScript bundles like index.js, _app.js, webpack.js, and main.js, and what each preloaded file contains.
Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-11-27 | Topics: [Next.js](https://flaviocopes.com/tags/next/) | Canonical: https://flaviocopes.com/nextjs-app-bundles/
When you view the page source of a [Next.js](https://flaviocopes.com/nextjs/) app, you can see a bunch of [JavaScript](https://flaviocopes.com/javascript/) files being loaded:
Let's start by putting the code in an [HTML formatter](https://htmlformatter.com/) to get it formatted better, so we humans can get a better chance at understanding it:
```html
Home page
```
We have 4 JavaScript files being declared to be preloaded in the `head`, using `rel="preload" as="script"`:
- `/_next/static/development/pages/index.js` (96 LOC)
- `/_next/static/development/pages/_app.js` (5900 LOC)
- `/_next/static/runtime/webpack.js` (939 LOC)
- `/_next/static/runtime/main.js` (12k LOC)
This tells the browser to start loading those files as soon as possible, before the normal rendering flow starts. Without those, scripts would be loaded with an additional delay and this improves the page loading performance.
Then those 4 files are loaded at the end of the `body`, along with `/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js` (31k LOC), and a [JSON](https://flaviocopes.com/json/) snippet that sets some defaults for the page data:
```html
```
The 4 bundle files loaded are already implementing one feature called **code splitting**. The `index.js` file provides the code needed for the `index` component, which serves the `/` route, and if we had more pages we'd have more bundles for each page, which will then only be loaded if needed - to provide a more performant load time for the page.