前端首屏优化策略
花了两周多，终于完成了一个基本无 bug 的项目，但是有个比较大的问题就是：在 webpack 测试环境下，编译时间太久了，app.js 太大了，导致页面初始化极其的慢，虽然说正式环境下不会有这个问题，同事也说测试环境 1000 kb 左右正常，不用优化，但是自己的页面打开慢还是让人感到极其不爽的，花了两个钟左右，我把 app.js 从 1983 kb 缩小到了 1083 kb，压缩之后为 273 kb，首屏运行速度从原来的可能要十多秒，提升到了 166 ms，我是怎么做到这些的呢？主要策略如下：
首先，从包开始优化，我用的包就一个 elementUI，用过的人应该都知道，这个包有几百 kb，简直就是恶魔啊，所以，必须要打压他一下。这里的主要策略就是按需引入 elementUI，关于 elementUI 的按需引入，官方有介绍，看这里，这里我要讲的是，官方可能叫你这么引入这个库的：
在 main.js 引入改库
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
这种引用方式在实际引用中，会大大增加 app.js 的体积，所以，这里，我是把 elemenui 相关的引用放到相应的组件里面，以组件的形式去引用，这样，app.js 的体积会缩小很多。
然后，就是写代码的习惯了，比如引用组件，尽量用以下形式，代替 import from 的方式：
const Loading = () => import('@/components/Common/loading');
这种方式引入组件的好处是，webpack 会对代码进行自动分割，异步加载组件，从而实现路由的懒加载，根据需求引入不同的组件，而不是第一次加载就全部引入。更详细的解释看这里
接着就是把代码里的 console 相关的语句去掉啦，别看 console 只是稍微的调用了一下函数，看起来对性能影响不大，但是代码里满是 console 语句，就会有一点影响了，所以还是能去掉就去掉为好。除了去除 console 相关语句，别忘了把多余的代码和组件也去掉，这会一定程度上减少包的体积。
最后就是网络请求能少则少啦，但是个人不太推荐用缓存的，问题太多了，后期。
相关链接：
