ES6模块需与打包工具协同才能可靠运行；浏览器原生支持有严格限制，如需type="module"、正确MIME类型及合法路径；导出应保持一致性和可预测性；动态导入和Tree-shaking依赖构建配置与代码规范。
ES6 模块（import/export）本身不是“最佳实践”的终点，而是现代模块化开发的起点；真正决定是否可靠、可维护、可部署的，是它如何与打包工具协同工作——不配合适当的构建流程，import 在浏览器中直接运行会 404，export 无法被 Tree-shaking，动态导入也容易触发 CORS 或路径错误。
为什么 import 在浏览器里直接写就报错？
原生 ES6 模块需满足两个硬性条件：type="module" 属性 + 正确的 MIME 类型（application/javascript），且所有 import 路径必须是完整 URL 或以 ./、../、/ 开头的相对/绝对路径——不能是裸包名（如 import { debounce } from 'lodash'）。
- 浏览器不解析
node_modules，也不支持package.json的exports字段或别名 -
import路径若缺扩展名（如./utils），多数浏览器拒绝加载（Chrome 仅对.js隐式补全，但不保证） - 跨域脚本（如通过
file://打开 HTML）会因 CORS 被拦截，即使本地文件也报Cross-Origin Read Blocking
export default 和具名 export 怎么选才不踩坑？
二者语义不同，混用会导致引用混乱和 Tree-shaking 失效。关键不是“哪个更好”，而是“是否一致”和“是否可预测”。
-
export default对应一个匿名或默认绑定，import utils from './utils'可任意命名，但一个模块只能有一个 - 具名
export（如export const a = 1; export function b() {}）必须用对应名称解构：import { a, b } from './utils'，支持按需引入 - 避免混合导出：
export default function foo() {}+export const bar = 2—— 这会让消费者既要import foo, { bar }，又难以静态分析依赖 - 库作者若想兼顾默认 + 具名，应显式导出命名空间对象：
export { default as default, foo, bar } from './main'
Webpack/Vite/Rollup 对 import() 动态导入的处理差异
import() 是 Promise，但打包工具对它的 chunk 拆分策略完全不同，直接影响首屏加载和缓存失效范围。
立即学习“Java免费学习笔记（深入）”；
- Webpack 默认将每个
import('./a.js')拆成独立 chunk，文件名含 hash（如a.123abc.js），适合路由级懒加载 - Vite 在开发时保留原路径，生产构建后生成带 hash 的 chunk，但支持
/* @vite-ignore */跳过预构建（用于 CDN 资源） - Rollup 默认不拆分动态导入，需手动配置
output.manualChunks或使用插件（如@rollup/plugin-dynamic-import-vars）处理变量路径 - 常见错误：
import(`./locales/${lang}.js`)在 Webpack 中无法自动识别变量，需改用require.context或明确列出所有可能路径
const modules = {
en: () => import('./locales/en.js'),
zh: () => import('./locales/zh.js')
};
const localeModule = modules[lang];
if (localeModule) {
localeModule().then(({ messages }) => {
// 使用 messages
});
}Tree-shaking 为什么有时没生效？
Tree-shaking 不是开关，而是一整套静态分析链路：ES6 模块语法 + 无副作用标识 + 打包器正确配置 + 代码未被动态访问。
- 函数内使用
eval、with、arguments.callee会关闭整个模块的摇树优化 - 第三方包若未在
package.json中声明"sideEffects": false或数组（如["*.css"]），其全部内容会被保留 -
export * from './x'会阻止对x的深度分析，建议显式重导出：export { foo, bar } from './x' - Vite 默认启用，但开发服务器不执行摇树；Webpack 需设
mode: 'production'且optimization.usedExports: true
模块化真正的复杂点不在语法，而在边界：模块系统（ESM/CJS）、打包器（解析策略/副作用判定）、运行时（浏览器限制/动态路径）、协作规范（导出一致性/包元数据）四者稍有错位，就会出现“本地能跑，上线报错”“开发正常，压缩后功能消失”这类问题。盯住这四个边界，比背熟 import 语法重要得多。
