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％ 的浏览器不需要它们，因此值得动态加载它们。

（编辑：晋中站长网）

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