基于Vite实现包的按需导入：技术名称与实现方法

一、技术名称 #

这种技术叫做Tree Shaking（摇树优化），核心是配合包的分模块导出设计实现。Tree Shaking会在打包时自动剔除未被使用的代码，而包本身的合理模块化拆分是前提——确保不同导出项来自独立的子模块，避免打包时引入无关代码。

二、具体实现方式（基于Vite） #

1. 包的源码结构设计 #

先将包拆分为独立子模块，每个功能对应单独文件，示例结构：

your-package/
├── src/
│   ├── ref-like.js       # 对应类似ref的轻量功能
│   ├── async-comp.js     # 对应类似defineAsyncComponent的复杂功能
│   └── index.js          # 统一导出入口

在src/index.js中用ES模块语法统一导出所有功能：

// src/index.js
export { default as refLike } from './ref-like.js'
export { default as defineAsyncComp } from './async-comp.js'

2. 配置Vite构建选项 #

在vite.config.js中开启库模式构建，确保产物支持Tree Shaking：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: './src/index.js',
      name: 'YourPackage',
      fileName: (format) => `your-package.${format}.js`,
      formats: ['es', 'cjs'] // 至少生成ES模块格式，这是Tree Shaking的基础
    },
    rollupOptions: {
      external: [], // 外部化不需要打包的依赖（如有）
      output: {
        preserveModules: true, // 保留原模块结构，生成独立子模块文件
        preserveModulesRoot: 'src', // 指定保留模块的根目录
      }
    }
  }
})

3. 配置package.json #

在package.json中指定模块入口，让打包工具优先识别ES模块：

{
  "name": "your-package",
  "version": "1.0.0",
  "type": "module", // 声明包使用ES模块
  "main": "./dist/your-package.cjs.js", // CommonJS入口
  "module": "./dist/your-package.es.js", // ES模块入口
  "exports": {
    ".": {
      "import": "./dist/your-package.es.js",
      "require": "./dist/your-package.cjs.js"
    },
    // 可选：配置子模块直接入口，支持用户单独导入子模块
    "./ref-like": {
      "import": "./dist/ref-like.js",
      "require": "./dist/ref-like.cjs.js"
    }
  },
  "sideEffects": false // 声明包无副作用，让Tree Shaking更彻底（如有副作用可指定具体文件）
}

4. 验证效果 #

用户使用时，无论是导入单个导出项：

import { refLike } from 'your-package'

还是直接导入子模块：

import refLike from 'your-package/ref-like'

打包工具（Vite、Webpack等）都会只打包用到的代码，实现不同导入对应不同打包体积的效果。

关键注意事项 #

• 必须使用ES模块语法（import/export），CommonJS的require不支持Tree Shaking。
• 避免无意义的全局副作用代码，若有必须保留的副作用，需在package.json的sideEffects中声明。
• Vite基于Rollup，Rollup的Tree Shaking默认开启，只要配置符合要求即可自动生效。

内容的提问来源于stack exchange，提问作者123456