For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/guide/output.md.
这是开发预览网站。请访问正式文档 lynx-stack.dev

构建输出文件

本章将介绍输出文件的目录结构以及如何控制不同类型文件的输出路径。

默认目录结构

以下是基本的输出目录结构。默认情况下,编译后的文件会输出到当前项目的 dist 目录中。

生产环境

生产环境下,dist/ 目录包含所有需要部署的文件。

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

最常见的输出文件包括 Bundle 文件、JS 文件和静态资源:

  • Bundle([name].lynx.bundle),可通过 output.filename.bundle 配置
  • 懒加载 Bundle(lazy-bundle/[name].[hash].bundle),每个动态 import() 产出一个
  • JS 文件(static/js/*.js),可通过 output.distPath.js 和 output.filename.js 配置
  • 静态资源目录(static/{font,image,media,svg})

文件名中的占位符含义:

  • [name] 表示入口名称(如 index、main)
  • [hash] 是基于文件内容生成的哈希值
  • [id] 是 Rspack 内部 chunk ID

开发环境

开发环境下会生成 dist/.lynx 目录用于调试:

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

开发环境额外生成的文件包括:

  • 后台线程脚本(Background Thread Script):内联到 Bundle 中的脚本,默认输出到 .lynx/[name]/background.js
  • 主线程脚本(MainThread Thread Script):默认输出到 .lynx/[name]/main-thread.js
  • Debug Metadata:反解线上错误所需的元数据(包含 source map、字节码调试信息、UI source map 与构建信息),默认输出到 .lynx/[name]/debug-metadata.json,详见 线上错误反解

修改目录结构

Rspeedy 提供以下配置项来调整输出目录:

扁平化目录

若需要简化目录层级,可将目录配置设为空字符串来实现扁平化结构:

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

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

上述配置将生成以下结构:

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