经过几天的奋斗。基本页面代码已完成,马上放服务器。
效果如下:
…等。
当访问主页时,等的时间实在是太久,这怎么行?于是查看了一下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。
再次访问
完美。