Web机能优化： 行使Webpack疏散数据的正确要领

因此，你留意到你的结帐页面完全奇异的代码是 7KB。 该网站的别的部门是 300 KB。 我会看着这个，然后说，我不规划把它拆分，缘故起因如下:

•  提前加载不会变慢。记着，你是在并行加载全部这些文件。查察是否可以记录 300KB 和 307KB 之间的加载时刻差别。

*　假如你稍后加载此代码，则用户必需在单击“TAKE MY MONEY”之后守候该文件 - 你但愿耽误的最小的时刻。

•  Code splitting 必要变动应用措施代码。 它引入了异步逻辑，早年只有同步逻辑。 这不是火箭科学，但我以为应该通过可感知的用户体验改造来证明其伟大性。

让我们看两个 code splitting 的例子。

Polyfills

我将从这个开始，由于它合用于大大都站点，而且是一个很好的简朴先容。

我在我的网站上行使了一些怪异的成果，以是我有一个文件可以导入我必要的全部polyfill， 它包罗以下八行：

// polyfills.js   
require('whatwg-fetch');  
require('intl');  
require('url-polyfill');  
require('core-js/web/dom-collections');  
require('core-js/es6/map');  
require('core-js/es6/string');  
require('core-js/es6/array');  
require('core-js/es6/object'); 

在 index.js 中导入这个文件。

// index-always-poly.js  
import './polyfills';  
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'));  
}  
render(); // yes I am pointless, for now 

行使 bundle splitting 的 Webpack 设置，我的 polyfills 将自动拆分为四个差异的文件，由于这里有四个 npm 包。 它们总共约莫 25 KB，而且 90％ 的赏识器不必要它们，因此值得动态加载它们。

（编辑：湖南网）

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