Web性能优化： 使用Webpack分离数据的正确方法

合理？ 如果支持所有这些内容，则渲染页面。 否则，导入 polyfill 然后渲染页面。 当这个代码在浏览器中运行时，，Webpack 的运行时将处理这四个 npm 包的加载，当它们被下载和解析时，将调用 render() 并继续进行。

顺便说一句，要使用 import()，你需要 Babel 的动态导入插件。另外，正如 Webpack 文档解释的那样，import() 使用 promises，所以你需要将其与其他polyfill分开填充。

基于路由的动态加载（特定于React）

回到 Alice 的例子，假设站点现在有一个“管理”部分，产品的销售者可以登录并管理他们所销售的一些没用的记录。

本节有许多精彩的特性、大量的图表和来自 npm 的大型图表库。因为我已经在做 bundle splittin 了，我可以看到这些都是超过 100 KB 的阴影。

目前，我有一个路由设置，当用户查看 /admin URL时，它将渲染 <AdminPage>。当Webpack 打包所有东西时，它会找到 import AdminPage from './AdminPage.js'。然后说"嘿，我需要在初始负载中包含这个"

但我们不希望这样，我们需要将这个引用放到一个动态导入的管理页面中，比如import('./AdminPage.js') ，这样 Webpack 就知道动态加载它。

它非常酷，不需要配置。

因此，不必直接引用 AdminPage，我可以创建另一个组件，当用户访问 /admin URL时将渲染该组件，它可能是这样的:

// AdminPageLoader.js   
import React from 'react';  
class AdminPageLoader extends React.PureComponent {  
  constructor(props) {  
    super(props);  
    this.state = {  
      AdminPage: null,  
    }  
  }  
  componentDidMount() {  
    import('./AdminPage').then(module => {  
      this.setState({ AdminPage: module.default });  
    });  
  }  
  render() { 
    const { AdminPage } = this.state;  
    return AdminPage  
      ? <AdminPage {...this.props} />  
      : <div>Loading...</div>;  
  }  
}  
export default AdminPageLoader; 

这个概念很简单，对吧? 当这个组件挂载时(意味着用户位于 /admin URL)，我们将动态加载 ./AdminPage.js，然后在状态中保存对该组件的引用。

在 render 方法中，我们只是在等待 <AdminPage> 加载时渲染 <div>Loading...</div>，或者在加载并存储状态时渲染 <AdminPage>。

我想自己做这个只是为了好玩，但是在现实世界中，你只需要使用 react-loadable ，如关于 code-splitting 的React文档 中所述。

总结

（编辑：应用网_阳江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!