react学习--简单优化访问网页加载慢问题

经过几天的奋斗。基本页面代码已完成，马上放服务器。
效果如下：



…等。
当访问主页时，等的时间实在是太久，这怎么行？于是查看了一下Network，
发现：

24 + 秒，我的天。。。。。不行，得整顿整顿代码。

1、devtool 设置false

找到react项目中 node_modules --> react-scripts–>config–>
webpack.config.js, 设置 devtool 为 false。打包。嗯，好像没啥用。依然很慢，但是项目打包js中少了 map.js。

2、nginx 设置gzip

在服务器找到 nginx.conf中，添加：

# 开启gzip
 gzip on;
# 文件最小是压缩
gzip_min_length 1k;
#压缩文件类型
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

效果显著啊 24s -> 8s：

，但是发现打包出来的chunk.js 体积2.2mb，有点大呀。

按需加载组件

1.ant ui 按需加载

安装

npm add babel-plugin-import --dev // 安装

在目录创建 .babelrc， 如果有就不需要了。添加：

{
"plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css"
            }
        ],
        "transform-runtime"
    ]
}

antd-mobile 这样：

{
  "plugins": [
    ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

这时打包出来的chunk.js 变成了 1.1MB。

2、echarts 按需加载

可视化中使用了百度echarts，使用require 引用时是将所有资源加载。
创建 echarts.js,加入：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图等
require('echarts/lib/chart/bar');
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");

// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require("echarts/lib/component/dataZoom");
require("echarts/lib/component/markPoint");
require("echarts/lib/component/markLine");
export default echarts

使用

// 重点：此位置引入的是你单独配置的echarts
import echarts from '@/lib/echarts'

此时，打包出来的chunk.js 变成了 800+k。
再次访问

完美。