Question

我接受了面试，招聘人员问我“处理部分更新并管理应用程序大小”

例如，他解释并展示了一个大小为8MB的SPA，他说这不理想和完美！？！？

他说我们应该用不同的方法管理应用程序大小！？

对于测试，在面试会议之后，我使用谷歌浏览器DevTools检查了linkedin网站。在任何请求后，我看到响应谁是html网页（Html，Css，JS），并且显然每个请求后的linkedin都会向页面添加html响应，这是控制SPA大小的想法！

所以我有一个问题，默认情况下在create-react-app包中我们有webpack来创建web模块，并将所有组件加载到一个bundle.js，这个js文件对于40个或更多组件来说会很重。可能是10MB或更多...

如何使用完美而准确的部分更新方法实现真实优化的SPA结构？

不幸的是我只知道一点英语，如果我错误地写英文，请原谅我:-); - ）

谢谢

Answer 1

我认为您需要的是动态导入或异步加载组件（或更多代码）。有很多方法可以做到这一点，如

当用户向下滚动组件时加载
仅在用户单击按钮（例如模态）
在已经呈现初始关键数据之后加载组件（例如，只有在其父组件已加载并呈现给dom之后才下载组件的代码）。

最后一个例子可以这样做：

class Dynamic extends Component {
  constructor(props) {
    super(props);
    this.state = { module: null };
  }
  componentDidMount() {
    const { path } = this.props;
    import(`${path}`)
      .then(module => this.setState({ module: module.default }))
  }
  render() {
    const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
    return(
      <div>
        {Component && <Component />}
      </div>
    )
  }
}

上面的代码正在做的是在已经加载组件代码之后加载组件代码，方法是在组件中挂载它。

此代码分割方法目前是

由create-react-app支持。

了解更多here

同时检查此react-loadable

Answer 2

我建议您查看 ReactJs 文档中的延迟加载概念。它基本上只在需要时才导入并减少包大小。

ReactJS Code splitting Documentation

如何使用ReactJS实现真正的部分更新？

2 个答案: