Output Files#

This chapter will introduces the directory structure of output files and how to control the output directory of different types of files.

Default Directory Structure#

The following is a basic directory for output files. By default, the compiled files will be output in the dist directory of current project.

Production#

In production, the dist/ directory contains all the files that need to be deployed.

dist/
├── [name].lynx.bundle
├── async
│   └── [name].lynx.bundle
└── static
    ├── image
    │   └── [name].[hash].png
    ├── svg
    │   └── [name].[hash].svg
    └── js
        ├── [id].[hash].js
        │   └── async
        │       └── [id].[hash].js
        └── lib-preact.[hash].js

The most common output files are Bundle files, JS files and static assets:

• Bundle files([name].lynx.bundle), which can be configured with output.filename.bundle.
• Async(lazy) bundle files(async/[name].lynx.bundle).
• JS files(static/js/*.js), which can be configured with output.distPath.js and output.filename.js.
• Static assets(static/{font,image,media,svg}) directory.

In the filename, [name] is the entry name corresponding to this file, such as index, main. [hash] is the hash value generated based on the content of the file. [id] is the internal chunk ID of Rspack.

Development#

In development, an dist/.rspeedy directory is emitted which contains the resources for debugging.

dist/
├── .rspeedy
│   ├── async
│   │   └── [name]
│   │       ├── debug-info.json
│   │       ├── tasm.json
│   │       └── [name].css
│   ├── [name]
│   │   ├── background.js
│   │   ├── background.js.map
│   │   ├── debug-info.json
│   │   ├── [name].css
│   │   ├── main-thread.js
│   │   ├── main-thread.js.map
│   │   └── tasm.json
│   └── rspeedy.config.js
├── [name].lynx.bundle
└── static
    ├── image
    │   ├── [name].[hash].png
    │   └── [name].[hash].svg
    └── js
        ├── [id].[hash].js
        │   └── async
        │       ├── [id].[hash].js
        │       └── [id].[hash].js.map
        ├── lib-preact.[hash].js
        └── lib-preact.[hash].js.map

In addition, Rspeedy generates some extra files in development:

• Background Thread Script(BTS): The background script file that is inlined into the bundle, default output to .rspeedy/[name]/background.js.
• MainThread Thread Script(MTS): The main-thread script file that is inlined into the bundle, default output to .rspeedy/[name]/main-thread.js.
• Source Map files: contains the source code mappings, which is output to the same level directory of JS files and adds a .map suffix.

Modify the Directory#

Rspeedy provides some configs to modify the directory or filename, you can:

• Modify the filename through output.filename.
• Modify the output path of through output.distPath.
• Modify the license file through output.legalComments.
• Modify Source Map file through output.sourceMap.

Flatten the Directory#

Sometimes you don't want the dist directory to have too many levels, you can set the directory to an empty string to flatten the generated directory.

See the example below:

import { defineConfig } from '@lynx-js/rspeedy';

export default defineConfig({
  output: {
    distPath: {
      js: '',
    },
    filename: {
      bundle: '[name].lynx.bundle',
    },
  },
});

The above config produces the following directory structure:

dist
├── [id].[hash].js
├── [id].[hash].js.map
└── [name].lynx.bundle