vue——项目优化,缩短首屏加载时间

原创 minsong 随笔 Vue 1260阅读 2018-05-23 19:32:09 举报

在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。

解决方法是,将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。

外部的库文件,可以使用CDN资源,或者别的服务器资源等。

下面来介绍几种方式:

1.大文件定位

我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。
安装

在webpack中设置如下,然后npm run dev 的时候会默认在浏览器上打开。

如下图所示,空间比较大的基本上都是文件比较大

2.JS文件按需加载

如果没有这个设置,项目首屏加载时会加载整个网站所有的JS文件,所以将JS文件拆开,点击某个页面时再加载该页面的JS是一个很好的优化方法。
这里用到的就是vue的组件懒加载。在router.js中,不要使用import的方法引入组件,使用require.ensure。

3.将JS文件放在body的最后

默认情况下,build后的index.html中,js的引入是在header中。
使用html-webpack-plugin插件,将inject的值改成body。就可以将js引入放到body最后。

4.使用cdn

打包时,把vue、vuex、vue-router、axios等,换用国内的bootcdn 直接引入到根目录的index.html中。
在webpack设置中添加externals,忽略不需要打包的库。

在index.html中使用cdn引入。

在 main.js 中去除Vue.use(ElementUI)

5.压缩代码并移除console

使用UglifyJsPlugin 插件来压缩代码和移除console。

6.使用骨架屏

请参考另一篇文章

7.打包优化

在生产环境进行打包的时候,需要设置一些内容。

8.对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩

gzip会对js、css文件进行压缩处理;对于图片进行压缩问题,对于png,jpg,jpeg没有压缩效果,对于svg,ico文件以及bmp文件压缩效果达到50%,在productionGzipExtensions: ['js', 'css','svg']设置需要进行压缩的什么格式的文件。对项目文件进行压缩之后,需要浏览器客户端支持gzip以及后端支持gzip。

9.源码优化

1.v-if 和 v-show选择调用

v-show和v-if的区别是:v-if是懒加载,当状态为true时才会加载,并且为false时不会占用布局空间;v-show是无论状态是true或者是false,都会进行渲染,并对布局占据空间对于在项目中,需要频繁调用,不需要权限的显示隐藏,可以选择使用v-show,可以减少系统的切换开销。

2.为item设置唯一key值

在列表数据进行遍历渲染时,需要为每一项item设置唯一key值,方便vuejs内部机制精准找到该条列表数据。当state更新时,新的状态值和旧的状态值对比,较快地定位到diff

3.细分vuejs组件

在项目开发过程之中,第一版本把所有的组件的布局写在一个组件中,当数据变更时,由于组件代码比较庞大,vuejs的数据驱动视图更新比较慢,造成渲染比较慢。造成比较差的体验效果。所以把组件细分,比如一个组件,可以把整个组件细分成轮播组件、列表组件、分页组件等

4.减少watch的数据

当组件某个数据变更后需要对应的state进行变更,就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小,性能消耗不明显。当数据变大,系统会出现卡顿,所以减少watch的数据。其它不同的组件的state双向绑定,可以采用事件中央总线或者vuex进行数据的变更操作

5.内容类系统的图片资源按需加载

对于内容类系统的图片按需加载,如果出现图片加载比较多,可以先使用v-lazy之类的懒加载库或者绑定鼠标的scroll事件,滚动到可视区域先再对数据进行加载显示,减少系统加载的数据

6.SSR(服务端渲染)

如果项目比较大,首屏无论怎么做优化,都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染),vuejs官方文档提供next.js很好的服务端解决方案,但是局限性就是目前仅支持Koa、express等Nodejs的后台框架,需要webpack支持

10.nginx配置压缩

没有开启压缩时,打包后生成的文件如下:

配置nginx的内容,并进行启用

上面为数据流接收大小,下面为解压后实际大小。

见*8.对项目代码中的JS/CSS/SVG(.ico)文件进行gzip压缩**使用webpack打包生成.gz的文件,并上传至服务器
打包后的文件:

浏览器访问:

gzip相应539kb。并非加载app.........gz的 412kb
删除*.gz文件,依旧539kb。
莫非,webpack打包gzip文件并没有什么用处

经过查询得知需要配置gzip_static静态压缩
客户端发起请求

      -》Nginx接收请求

        -》Nginx加载文件进行gzip打包压缩成*.gz

          -》返回给浏览器

            -》浏览器解压*.gz

    也就是说,每次请求,Nginx都会进行压缩返回、压缩返回、压缩返回、 将会导致浪费大量CPU。

重启nginx之后的浏览器请求:

开启gzip_static后。流程就会变成

nginx的gzip压缩力度从1-9 。如果开启过大,CPU会严重浪费,而webpack压缩gzip默认是9.因此,打包压缩gzip静态资源是很有必要的。

评论 ( 1 )
最新评论