首先React这类框架？

目前主流的前端框架React、Vue、Angular都是采用客户端渲染（服务端渲染暂时不在本文的考虑范围内）。这当然极大的减轻了服务器的压力。相对的浏览器的压力就增加了。这就意味着大量的js文件需要在本地运行。而从服务器下载这些大的js文件需要时间。再运行这些js又需要时间。这是首页加载慢的本质原因。当然只是首页，因为后续有缓存的存在，相对就很快了。那么如何提升速度呢？无非从两个方向入手：

• 提高下载静态资源的速度
• 优化代码提高运行速度

提升下载静态资源的速度

提升下载静态资源的速度的方法有很多。

升级HTTP1.1到HTTP2.0,开启gzip数据压缩，上cdn等，这些都是最有效提升速度的方法。

自己的网站也主要从这些方面去一一的优化来提高速度的。

优化代码提高运行速度

安装cnpm install react-loadable -S

如果项目有100个页面，那laodable.js就需要写100遍，这样就感觉有点冗余了，所以这个我们可以封装一下

首先，我们建一个util    src/util/loadable.js

import React from 'react';

import Loadable from 'react-loadable';

import { Spin } from 'antd';

//通用的过场组件

function loadingComponent() {

return (

  <div style={{

     display: "flex",

     justifyContent: "center",
      alignItems: "center",

      textAlign: 'center',

      width: "100%",

      height: "1000px"

    }}> 
    <Spin size="large" />
   </div>

  )

}



//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件

export default (loader, loading = loadingComponent) => {

  return Loadable({

    loader,

    loading

  });

}

compression-webpack-plugin还有其它配置项，具体可以去webpack官网，直接搜索compression-webpack-plugin就行。

如果使用的是antd框架，通过打包分析，你会发现有个icons文件500多k，有点大~

解决办法是：

1.随意找个地方建个.js文件，名称也随意~，比如是icons.js (当然要规范哈)，用来按需引入在项目中使用到的图标，如下：

// 根据自己在项目中使用到的图标 按需引入
export { default as UserOutline} from '@ant-design/icons/lib/outline/UserOutline'
export { default as LockOutline} from '@ant-design/icons/lib/outline/LockOutline'
export { default as GitlabOutline} from '@ant-design/icons/lib/outline/GitlabOutline'
export { default as ProjectOutline} from '@ant-design/icons/lib/outline/ProjectOutline'
export { default as BulbOutline} from '@ant-design/icons/lib/outline/BulbOutline'
export { default as DesktopOutline} from '@ant-design/icons/lib/outline/DesktopOutline'

  2.在webpack配置文件中的alias对象，添加一些代码，代码如下：

alias:{
   '@ant-design/icons/lib/dist$': path.resolve(__dirname, '填第一步文件的路径')
   // '@ant-design/icons/lib/dist$': path.resolve(__dirname, '../src/util/icons.js')
}

注：目前使用的antd版本是^3.26.15 。如果项目中，用的图标太多，那就有点麻烦了，可以直接考虑用阿里巴巴矢量图吧~