花了两周多,终于完成了一个基本无 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 相关语句,别忘了把多余的代码和组件也去掉,这会一定程度上减少包的体积。

最后就是网络请求能少则少啦,但是个人不太推荐用缓存的,问题太多了,后期。