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

使用 Webpack 4 和 import() 语法（不要与 import 语法混淆），有条件地加载polyfill 非常容易。

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App/App';  
import './index.css';  
const render = () => {  
  ReactDOM.render(<App />, document.getElementById('root'));  
}  
if (  
  'fetch' in window &&  
  'Intl' in window &&  
  'URL' in window &&  
  'Map' in window &&  
  'forEach' in NodeList.prototype &&  
  'startsWith' in String.prototype &&  
  'endsWith' in String.prototype &&  
  'includes' in String.prototype &&  
  'includes' in Array.prototype &&  
  'assign' in Object &&  
  'entries' in Object &&  
  'keys' in Object  
) {  
  render();  
} else {  
  import('./polyfills').then(render);  
} 

合理？ 如果支持所有这些内容，则渲染页面。 否则，导入 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文档 中所述。

总结

对于上面总结以下两点：

•  如果有人不止一次访问你的网站，把你的代码分成许多小文件。
•  如果你的站点有大部分用户不访问的部分，则动态加载该代码。

（编辑：ASP站长网）