学习笔记《前端性能调优》

	效果
无优化	单个JS文件，大于10M
懒加载	多个JS文件，最大的3M
uglify	多个JS文件，最大的1.5M
gzip	多个JS文件，最大的473K
代码层面	todo

懒加载

Vue 的文档里面有详细的说明，利用的是 webpack 的分包机制，将单独的 app.js 文件依照路由系统打包成许多不同的文件，当用户访问的某个路由的时候才产生加载动作

https://router.vuejs.org/en/advanced/lazy-loading.html

uglify

laravel-mix 在执行 npm run prod 的时候会自动调用 uglify，将前端代码进行压缩处理：

https://laravel.com/docs/5.5/mix
https://github.com/mishoo/UglifyJS2

gzip

在 Nginx 或者 Apache 上打开配置，就可以实现 gzip

http://nginx.org/en/docs/http/ngx_http_gzip_module.html

代码层面

比如去掉一些可以不依赖的库，换某些库的lite版等等，某人建议的是每个JS文件的大小不要超过300K，传输时间在3s以内

分析一个JS文件的构成，是很重要的进行代码层面优化的前提，webpack 官方推荐了一些工具（4个），可以做 bundle analysis

官方文档：https://webpack.js.org/guides/code-splitting/#bundle-analysis

Webpack Bundle Analyzer 是比较熟悉的一个，这里是一个使用教程：
https://www.youtube.com/watch?v=ltlxjq4YEKU

在 laravel-mix 中的配置可以参考：
https://github.com/JeffreyWay/laravel-mix/issues/1216

最终的效果如：

前端性能调优的目标

单个JS文件在300K以内

整个页面的载入时间期望值是1.5s可接受时间是3s，绝对不能超过5s，否则90%用户都会流失