close
logo
Rslib
指南
配置
博客
English
简体中文
指南
配置
博客
English
简体中文
logo
Rslib

开始

介绍
快速上手
名词解释
NPM 包

解决方案

Node.js
React
Vue

基础

命令行工具
配置 Rslib
使用 TypeScript
产物输出格式
产物结构
升级 Rslib

进阶

处理三方依赖
产物兼容性
类型生成
引用静态资源
引用 SVGR
引用 JSON 文件
模块联邦
使用 Storybook

迁移

Modern.js Module
tsup

常见问题

功能类问题
📝 在 GitHub 上编辑此页
上一页产物输出格式
下一页升级 Rslib

#产物结构

#bundle / bundleless

首先让我们了解一下 bundle 和 bundleless。

所谓 bundle 是指对构建产物进行打包,构建产物可能是一个文件,也有可能是基于一定的 代码分割策略 得到的多个文件。

而 bundleless,则是指对每个源文件单独进行编译构建,但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。Bundleless 构建的过程,也可以理解为仅对源文件进行代码转换的过程。

rslib-bundleless-mode

它们有各自的好处:

  • bundle 可以减少构建产物的体积,也可以对依赖预打包,减小安装依赖的体积,增加安全性。提前对库进行打包,可以加快应用项目构建的速度。
  • bundleless 则是可以保持原有的文件结构,更有利于调试和 tree shaking。
WARNING

bundleless 是单文件编译模式,因此对于类型的引用和导出你需要加上 type 字段, 例如 import type { A } from './types。更多信息可以参考 TypeScript - isolatedModules。

你可以使用 bundle 选项来指定是否进行 bundle,默认情况下该选项设置为 true。