优化打包:从4.5M首屏10秒 到 400k首屏 1s

[fygethub]

优化打包:从4.5M首屏10秒 到 400k首屏 1s

前传

emm这只是一个随心写的优化记录,事件的从刚进公司的第一天说起。

1. 首先安装环境,node npm node-sass ... balabala...
2. 分配git账号并开通对应项目权限好了，进入码云pull 代码npm start 运行项目看看整个项目大体样子.
3. 接下来就是到了重头戏了, 看了看 package.json 的打包命令,打包完毕后一看 main.js文件有4.5M 打开已上线的项目一看, 果然好多好多秒的大白屏.
4. ....中间是项目模块的开发... (几个月之后,公司所有前端项目都接手了)

[fygethub]

优化正式开始

既然自己要优化就得选好优化方向, 第一个方向是优化打包后的体积尽量减少首屏下载的js文件， 第二个优化是从体验上优化，给用户一个好的体验比如加一个动画有时候会比你在代码上优化收获多得多。

从体积优化

1. 体积优化最简单的是删除多余没用到的库, 项目中有用到lodash.js 工具库, 通过代码搜索发现只有一个地方用到了loadash中一个数组排序的方法, 看到这里我简直是不敢相信自己的眼镜,仔细检查了一遍又一遍,好吧确实是这样, 果断排序方法自己写,然后删掉lodash.js 顿时项目少了200多kb, 然后其他的就是升级react.js 和其他周边库, 升级webpack, 差不多少了近400kb达到4.5M -> 4.1 的净化成功的减少 0.5s 加载时间.
2. 继续检查多余库, 发现了在公众号项目中使用了 antd.js 的PC库,然后中间用到的组件有progress进度条还有些其他的一些小组件果断寻找替代的组件要不就是自己撸一个, 然后把antd也给剔除掉少了1M多的代码,因为有js 有css所有去除掉后少了很多体积,修改webpack配置添加上babel-plugin-import 按需引入这在待会优化webpack配置会再说.
3. webpack 打包配置上优化, 可以添加code splitting 和动态路由写法, 把不常加载或者比较大的页面从main.js中间拆分出去我试过把所有模板拆分出去这样main.js 可以小到200多kb但是总得来说体验需要从新优化, 每个页面之间跳转需要增加loading效果,当js下载完毕后关闭loading, 这会在优化体验再说.
4. 总结:体积优化最主要是从减少引用库,动态路由拆分.

从js加载速度

1. js加载速度主要是通过webpack提取不易改变的js库,例如react, react-dom, react-router...等, 打包成dell文件通过配置cdn 使js能下载的更快.

优化体验

1. 首屏增加loading效果,这个loading效果是直接添加到index.html里面然后在首屏渲染成功后关闭, 用户一进入公众号首先能看到一个动态的loading效果使用的是css 实现基本上是秒看, 这里有一个技术点, 打开页面后要看到loading需要把我们项目的css加载完后才能渲染.因为html-loader是默认吧css 放在header最前面,因此我们只需要把css文件修改为异步加载的模式就好了 loadcss 可以实现css的异步加载.
2. 每个模块没加载完成之前都用一个加载的loading替代,每一个模块加载未完成前都用一个Nodata的组件替代, 这个一个公共组件,类似一个加载条,这样好处是页面加载完成之前总是有东西的,不会存在空白页面的情况
3. 图片懒加载, 编写一个lazyloadImg 组件 然后无痛替换所有img 标签, 组件组要实现了当图片滚动到指定可视区后再加载, 在图片加载完成之前用loading图片替代, 然后在加一个fadeIn的效果,经过试验效果很不错😁
4. 编写高阶动画组件, 然后对需要使用动画的地方直接通过decorator语法类似animation('FadeIn')在对应css文件增加一个Fadein 名称的css类和动画效果这个组件就获得了一个渐入的动画效果😝

记录的不是很详细,不过这些都是自己实践的一个优化过程.