create-react-app 模块按需加载(Code Splitting)

🌙
手机阅读
本文目录结构

模块按需加载(Code Splitting)

与用户使用前下载整个应用程序不同,代码分割允许你将代码分割成小块,然后按需加载。

此项目设置支持通过 动态import() 进行代码拆分。

它是在第 4 阶段的 提案 。 import() 函数将模块名作为参数返回,返回一个Promise

该 Promise 总是 resolves 到模块的命名空间对象。

示例:

moduleA.js

const moduleA = 'Hello';

export { moduleA };

App.js

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}

export default App;

这将使 moduleA.js 及其所有唯一依赖项成为一个单独的块,仅在用户单击 ‘Load’ 按钮后加载。

有关创建的块的更多信息,请参阅生产构建 部分。

如果你愿意,也可以使用 async / await 语法。

使用 React Router

如果你使用的是 React Router ,请查看 https://reactjs.org/docs/code-splitting.html#route-based-code-splitting ,了解如何使用它进行代码分割。

你可以在 此处 找到随附的 GitHub 仓库。

另请参阅 React 文档中的 代码拆分 (Code Splitting) 部分。

构建的区别

如果你使用 code splitting(代码拆分) 来拆分应用程序,

当运行npm run build的时候,将在 build/static 文件夹中创建额外的 chunks

参考 create-react-app 创建生产构建 npm run build

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang