import() 动态加载语法

最新推荐文章于 2025-07-03 11:56:45 发布

原创最新推荐文章于 2025-07-03 11:56:45 发布 · 6.8k 阅读

4 ·

CC 4.0 BY-SA版权

本文对比了旧写法中在编译时加载模块的方式与新写法中动态加载模块的区别，详细介绍了如何使用动态导入（import()）在事件触发后加载特定模块，这有助于提升应用的性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//math.js

console.log("start loading");

export function add(a, b) {
  return a + b;
}

旧写法：在编译时就完成模块加载

import React, { PureComponent } from "react";
import { add } from "./math";

class App extends PureComponent {
  handleClick = () => {
    console.log(add(16, 26));
  };

  render() {
    return <button onClick={this.handleClick}>add</button>;
  }
}
export default App;

新写法：触发点击事件后才开始加载模块

import React, { PureComponent } from "react";

class App extends PureComponent {
  handleClick = () => {
    //动态加载
    import("./math").then(math => {
      console.log(math.add(16, 26));
    });
  };

  render() {
    return <button onClick={this.handleClick}>add</button>;
  }
}
export default App;