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文档 中所述。

总结

（编辑：湖南网）

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