echart移动端优化

Posted 2023-04-23

参考技术A

做移动端数据可视化产品，需要封装echarts图表做子组件，并兼容原先pc端api请求格式，还引入了地图数据，支持省份下钻。完成所有功能后，vendor大小2.49M，build速度59s，首屏加载速度和webpack打包速度都很慢。
webpack: 3.6 echarts:4.1

优化1:echart按需加载
（echart整体画图数据包700KB，比highcharts和f2要大，技术选型上可以考虑一下其他方案。）
从全局引用，优化为按需引用。引用echarts压缩过的省份地图的js数据，json数据会大一些，还需要registerMap。

优化2:路由懒加载，vue异步组件，vendor分包，首屏加载速度加快。
将路由页面拆分chunk打包，所有路由页面打包在cube中。
按需加载省市js数据，打包到province中。
封装echart子组件，打包到echarts中。

分包结果：
npm run build --report

优化3:webpack打包速度
分包后build速度41s，先用 webpack-visualizer-plugin 分析一下当前打包的状况。

生产环境：
配置CommonsChunkPlugin
加速文件搜索
配置 resolve.modules
设置 test & include & exclude
使用并行压缩插件 webpack-parallel-uglify-plugin
配置externals（cdn）（会增加首屏加载时长）
DllPlugin和DllReferencePlugin （会加载首屏加载时长）
使用HappyPack来加速构建

npm run build:dll
npm run build
webpack 3.x版本，add-asset-html-webpack-plugin需要2.1.3版本。
报错： TypeError: Cannot read property \'compilation\' of undefined

减少webpack打包时间，省份数据还编译。
加了cache-loader做缓存，用了 only-if-changed-webpack-plugin 插件，发现全局不动不编译，有一点动都编译。还和 html-webpack-plugin 有冲突。
巨大的echarts让人头大。

一开始想让打包好的dll，可以不首屏加载，动态加载。
发现有一个scriptjs的插件。

把echarts、地图数据拆到cdn里，scriptjs按需加载。

总结：
程序猿学好英语是件很重要的事情，github看的让人头大。
小师傅好厉害，哈哈哈。

相关链接：
https://www.npmjs.com/package/scriptjs
https://github.com/webpack/webpack/issues/3115

移动端页面秒开优化总结

移动端native页面、小程序页面、H5页面的优化简单总结