阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录