Vuecli3 vue2 webpack4总体目标减少黑屏时

lxf2023-02-16 15:49:26

Vuecli3 vue2 webpack4总体目标减少黑屏时

项目概况

中小型新项目,Vue-cli3 vue2 webpack4

总体目标

减少黑屏时长,用户能够更快地见到个人中心!

黑屏时长:从打开网址到见到网页页面,正中间黑屏停留的时间。

方位

1.降低网络资源容积,进而减少要求时长

2.降低网络资源要求数量,进而减少等待的时间

前期准备工作

如何知道装包容积?

装包搭建的情况下,应用--report指令:

vue-cli-service build --report

装包完成后,会到dist文件目录里边生成一个report html文档,里边显示的是你装包容积分布特征,能够根据项目状况,偏重于提升。

大约是这样子(图片来自网络,并不是我新项目具体情况)

Vuecli3 vue2 webpack4总体目标减少黑屏时

如何知道装包速率

有些人能通过--progress查看到装包用时,但对于我新项目没用,应用ProgressBarPlugin软件处理

config.plugins.push(new ProgressBarPlugin())}

逐渐使力