javascript 动态导入通过 import() 函数将代码分割为独立的块，仅在需要时加载，从而显著减少首屏初始 javascript 包的体积，加快解析和执行速度。具体做法是在路由切换、用户交互或条件判断中调用 import()，webpack 等构建工具会自动处理代码分割和懒加载逻辑，确保非关键资源不会阻塞首屏渲染。
动态导入如何改变打包结构
使用动态导入后，构建工具会将代码拆分为多个 chunk，主入口文件只包含核心逻辑，其他功能模块被分离到单独的 JS 文件中。这种结构使得浏览器在首次加载时只需请求主 bundle，后续再按需获取其他 chunk，有效降低了初始网络传输量。
// main.js
console.log('App started');
// 动态导入一个大型组件
const loadHeavyComponent = async () => {
const module = await import('./heavy-module.js');
module.init();
};
// 绑定到按钮点击事件
document.getElementById('btn').addEventListener('click', loadHeavyComponent);
// heavy-module.js
export function init() {
console.log('Heavy module loaded and initialized');
}
运行上述代码，控制台首先输出 'App started'，此时页面已可交互。当用户点击按钮后，浏览器才会发起对 heavy-module.js 的请求，加载完成后执行 init 函数并输出 'Heavy module loaded and initialized'。这证明了非关键代码并未在首屏阶段加载。
动态导入对首屏性能的具体影响
动态导入直接减少了首屏需要下载的 JavaScript 字节数，缩短了 Time to Interactive (TTI) 时间。通过将非关键路径的代码（如弹窗、图表库、第三方 SDK）延迟加载，浏览器可以优先解析和执行首屏必需的核心脚本，提升用户感知的加载速度。同时，由于 chunk 是独立文件，它们可以被浏览器缓存，用户在后续访问相关功能时无需重复下载。
// 模拟路由懒加载
const routes = [
{ path: '/home', component: () => import('./views/Home.vue') },
{ path: '/about', component: () => import('./views/About.vue') }
];
// 假设当前在首页
console.log('Home page rendered');
// 用户导航到 About 页
const loadAbout = async () => {
const module = await import('./views/About.vue');
module.render();
};
loadAbout();
// views/Home.vue
export function render() {
console.log('Home view rendered');
}
// views/About.vue
export function render() {
console.log('About view rendered');
}
执行流程显示，初始仅加载并渲染 Home 视图，输出 'Home page rendered'。当触发导航到 About 页时，才动态加载 About.vue 的 chunk，随后输出 'About view rendered'。这种机制确保了首屏只加载必要的 Home 代码，避免了 About 代码对首屏性能的干扰。
动态导入在特定条件下的行为表现
当动态导入的路径包含变量时，构建工具可能无法精确分析依赖，导致生成较大的公共 chunk 或所有潜在模块都被打包。例如，使用 import(`./modules/${name}.js`) 时，Webpack 会将 ./modules/ 目录下所有 JS 文件都打包进同一个 chunk，以便在运行时匹配。这种行为虽然实现了灵活性，但可能抵消部分代码分割的收益，因为用户可能只需要其中一个模块，却下载了整个目录的打包结果。因此，在使用变量路径时，应评估其带来的额外负载，必要时结合命名约定或手动拆分来优化。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
