本文正在参与 “性能优化实战记录”话题征文活动
前段时间偶然间发现组内有个项目打包后的体积非常的大，如下图所示，
这直接导致项目在部署的时候非常非常的慢，不夸张的说，喝完一杯茶了项目都没部署好，哈哈哈。真的非常影响开发体验，尤其对于博主这种总是冒火的脾气来说，每次部署都得‘骂骂咧咧’，啧啧啧。。。 所以决定，对它下手，优化一些比较刺头的包
首先第一步，找出对体积影响比较大的包，那么如何找出这些包呢？？？这里就需要引入个东西——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,这种建议放在服务器上，从而降低访问的延时
文章就先写到这里了，有什么问题的话欢迎大家指出，共同学习进步，吼吼吼～（博主是一个刚工作两年的小菜鸟）
