阅读 161

前端项目 性能优化

本文正在参与 “性能优化实战记录”话题征文活动

    前段时间偶然间发现组内有个项目打包后的体积非常的大,如下图所示,

    这直接导致项目在部署的时候非常非常的慢,不夸张的说,喝完一杯茶了项目都没部署好,哈哈哈。真的非常影响开发体验,尤其对于博主这种总是冒火的脾气来说,每次部署都得‘骂骂咧咧’,啧啧啧。。。  所以决定,对它下手,优化一些比较刺头的包

    首先第一步,找出对体积影响比较大的包,那么如何找出这些包呢???这里就需要引入个东西——report,不知道大家有没有见过下面这种五颜六色的图片呢?

    如果不知道那么,在这里告诉你,其实非常简单啦。这个页面是webpack的打包分析报告,我们根据这个页面,可看到哪些包占比大,哪些包占比小,哪个组件大。在我们的npm run build 打包命令后面添加--report,这样你会发现打包出来的dist文件夹中除了index.html外,多了个report.html的东西,打开之后如上图,这就是你这个项目的体积依赖分析报告,是不是没想到,竟然这么简单哈~

我这边的话由于公司项目的隐私问题,所以就不上图了哈,我这个项目主要影响体积的原因如下:

  • ant-design vue  没有按需引用

  • echarts、videojs  被打包到文件中

  • momentjs 语言包没有移除

**其次第二步,**既然知道了导致体积过大的原因,那么就直接专项治理呗,所以我们来看看治理的方式吧。

  1.  ant-design-vue 按需引用

         其实这个问题还是比较常见的,尤其很多入门的新手会不加思索、不考虑后果的去引入一些包、组件库等,可能不会很全面的想到后面的项目性能,以及可能引发的问题。所以这里我们一定要注意,尤其在使用组件库的时候,一定要按需加载,千万不要把整个组件库全部搬过来。这里以ant-design-vue为例子,看下如何进行优化的,下面这张图是 ant-design-vue 的官方文档对按需加载的描述:

    文档地址:ant-design-vue官方文档

 所以我们在项目里只需要将

["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] 
复制代码

加入到项目文件babel.config.js的plugins中就可以了。

但是在这里要注意,由于我们内部写了一些样式去覆盖ant-design-vue的原有样式,而我们采用上述方式的话,会重新加载ant-design-vue的样式,从而又覆盖我们自己定义的样式,所以处理方式如下图所示:

在使用的时候直接引入自己需要使用的组件就可以了,引入 ‘按钮’,如下:

import { Button } from 'ant-design-vue';
复制代码

2. echarts和video治理

首先针对 echarts和video,检查发现使用webpack打包的时候没有做external,external是用于排除一些引入的模块,不进行打包,引用外部的模块,但是因为没做external,所以导致打包的时候整个打进去了,从而引起打出来的包体积比较大。

external的使用也很简单,这里博主前几天刚好写了一篇文章做了专门的介绍,地址:external的使用介绍

       知道了原因,着手治理吧,在项目的webpack.conf.js文件中,加上external,从而防止一些体积比较大的包被打包入文件内,如下图所示

     还有就是把 echarts和video通过cdn的形式进行引入,即:在index.html文件中引入echarts和video的链接,这个不详说了,自己看看官网就明白啦,emm~

3. 移除moment语言包

其实在我们使用moment的时候,根本用不着那么多的语言包,所以这个对于我们来说当然就是个“累赘”啦,所以我们要留下自己需要的语言包,其他不要的通通‘打死’。

    在项目的webpack.conf.js文件中,添加:

plugins: [new VueLoaderPlugin(),new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
复制代码

如下图所示:

然后在vue.config.js文件中加上一段代码,如下图:

最后一步, 把项目重新打包,接下来就是收获的时候啦,体积果然有效的减少了,如下图:

这张图是在ant-design-vue治理之前截的,由于一些原因,ant-design-vue在我这个项目中不好修改为按需引入,所以…… 但是方法亲测有效,哈哈哈

    上面就是我这次项目体积治理的方法,当然了,优化项目性能的手段远远不止这,接下来再给大家简单的说一说哈:

  ** 1.**减少 HTTP 请求

一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等过程。试想一下,如果http请求过多,这肯定会大幅度影响我们项目的性能啊。

**2.**使用服务端渲染

客户端渲染:

服务端只响应数据,不生成html页面。

浏览器负责发送请求 获取数据,得到响应后渲染成页面。

然后客户端从上到下依次解析,如果解析的过程中发现了新的ajax请求,那就再发送新的请求,等拿到ajax 响应结果以后再渲染模板引擎 如下图所示:

服务端渲染:

客户端通过向服务端发送http请求。

           服务端接受请求后,将html文件响应给浏览器。

           浏览器将收到的html页面展示

           也就是说html页面的生成是在服务器端做的,而浏览器只需要进行渲染,这样大大的减少了加载的时间,提高了加载的效率

服务端渲染有什么优点呢?

举个栗子:

如果你的网站要加载四个文件才能完成页面的渲染,而且每个文件的大小是 1 M

    计算一下哈:浏览器渲染的网站的时候需要加载 4 个文件和 HTML 文件才能完成页面的渲染,也就是总共大小为 4M,这里还是忽略 HTML 文件大小的情况。

     服务端渲染的话只需要加载一个渲染完成的 HTML 就可以完成页面的渲染

     计算一下哈:大小为已经渲染好的 HTML 文件(这种文件一般情况不会太大)

     这就是为啥服务端渲染更快

这里参考了博主之前写nuxt时候的内容,感兴趣的话大家可以了解一下下哦:nuxt入门

   **3.**静态资源使用 CDN

我们都知道,当用户离服务器越远时,延迟就会越高。CDN 就是解决这个问题的,在多个位置部署服务器,让用户离服务器更近,然后请求会根据‘就近原则’访问最近的服务器,从而缩短请求时间。这里就不详细说了,感兴趣的话自己去瞅瞅

4.使用图标代替图片

我理解的,字体图标本质上来说就是个有形态的文字,我们可以给它设置一些文字相关的属性,例如 color、font-size ……    所以想对比图片的话,图标的体积无疑是要小很多的,而且现在图表库也很多,所以开发的时候尽量使用图标去代替图片哈

**5.**JavaScript 和css的位置优化

CSS 加载的过程中会阻止JS的执行,而JS 加载的时候又会使html暂停解析,如果把这些js、css放在head 标签中,且文件比较大的话,那么会造成页面短暂性的空白

  6.图片优化

a. 选择适合的图片类型,图片格式有很多,比如: PNG、JPG、gif、SVG、WebP 等等

     b. 对于清晰度要求不高的图片,可以对其进行适当的压缩

     c. 使用精灵图,这个其实本质是减少图片的请求吧,很多网站上都有使用

     d. 图片的懒加载,适用于图片过多的场景,只先加载当前视口区的图片,然后滚动加载

     e.cdn方式加载图片,有些图片可能几十M,这种建议放在服务器上,从而降低访问的延时

  文章就先写到这里了,有什么问题的话欢迎大家指出,共同学习进步,吼吼吼~(博主是一个刚工作两年的小菜鸟)

文章分类
前端
文章标签