| 效果 | |
|---|---|
| 无优化 | 单个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%用户都会流失
