阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      目录