JavaScript模块打包依赖构建工具而非原生特性，浏览器仅支持静态ES模块加载，不支持包名导入、非JS资源及文件合并；vite和webpack等工具通过图谱分析、转换与输出实现打包。
JavaScript 模块打包不是靠原生语言特性直接“打包”，而是依赖构建工具把 import/export 语句解析、转换、合并，并输出浏览器或 Node.js 可运行的单一文件（或多个 chunk）。没工具，光写 export 是打不了包的。
为什么 import 在浏览器里直接报错？
浏览器虽已支持 ES 模块（type="module"），但只支持静态加载远程或本地 .js 文件，不支持：
-
import第三方包名（如import _ from 'lodash'）——没有模块解析和安装机制 -
import非 JavaScript 资源（如.css、.png）——原生不识别 - 将多个模块合并成一个文件（即“打包”本质）——浏览器不做 bundling
所以你看到的“打包”，其实是 webpack、vite、esbuild 这类工具在背后做的图谱分析 + 转换 + 输出。
用 vite build 最快跑通一个打包流程
Vite 默认开箱即用，适合现代项目。它底层用 esbuild 做预构建，再用 rollup 打包生产代码。
立即学习“Java免费学习笔记（深入）”；
实操步骤：
- 确保项目有
vite.config.js（哪怕为空） - 入口 HTML 中 script 标签必须带
type="module"，且指向main.js（Vite 默认约定） - 执行
vite build，输出默认到dist/目录 - 生成的
dist/assets/*.js是已转译、已压缩、已 hash 命名的产物，含所有依赖模块
示例入口 main.js：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
import { debounce } from './utils.js';
import('./feature.js').then(m => m.init()); // 动态导入 → 生成独立 chunk
这个 import() 会被 Vite 自动拆包，不用手动配置。
webpack 手动配置时最常踩的三个坑
Webpack 灵活但配置门槛高，新手容易卡在以下环节：
-
mode: 'production'必须显式声明，否则process.env.NODE_ENV不是'production'，Uglify/Terser 不启用 -
resolve.extensions没配['.js', '.ts']，导致import foo from './foo'找不到foo.ts - 用了
url-loader或file-loader却没装对应版本（Webpack 5+ 已内置asset模块类型，应改用type: 'asset'）
比如处理图片：
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
type: 'asset', // Webpack 5+ 推荐写法
parser: { dataUrlCondition: { maxSize: 8 * 1024 } }
}
]
}
打包产物体积暴增？先看 import 是否引入了整包
像 import { debounce } from 'lodash' 在 Webpack/Vite 中默认仍会引入整个 lodash（tree-shaking 失效），因为该包未用 ES 模块导出，或构建工具未正确识别 side effects。
更安全的做法：
- 改用
import debounce from 'lodash/debounce'（路径精确） - 确认包的
package.json有"type": "module"或"exports"字段 - 在
vite.config.js中开启build.rollupOptions.treeshake = true（默认开启，但可显式确认）
用 rollup-plugin-visualizer 或 source-map-explorer 查真正打进包里的内容，比猜靠谱得多。
打包不是语法问题，是工程链路问题；真正卡住你的往往不是 export 写得对不对，而是模块解析路径、loader 匹配顺序、tree-shaking 条件、或产物部署时的 publicPath 配置——这些细节不报错，但会让结果和预期差很远。
