有了它，你的项目将快过火箭

前端性能优化总结

gzip压缩

gzip压缩效率很高，能够达到70%的压缩率

//npm i -D compression-webpack-plugin 安装插件依赖
configureWebpack: config => {  const CompressionPlugin = require('compression-webpack-plugin')  config.plugins.push(new CompressionPlugin()) } 复制代码

去掉console.log

生产环境中，不须要打印日志。经过对webpack进行配置，打包时自动去掉console.log

//npm i -D terser-webpack-plugin
configureWebpack:config =>{  const TerserPlugin = require('terser-webpack-pulugin')  config.optimzation.minimizer.push(  new TerserPlugin({  extractComments:false,  terserOptions:{compress:{drop_console:true}} //插件配置项 移除console  })  ) } 复制代码

去除SourceMap

代码压缩后进行调bug定位将很是困难，因而引入sourcemap记录压缩先后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便咱们调试。

sourcemap附带了不少信息，若是build须要生成sourcemap，将会大大下降build的速度，还会增长包的体积。

//vue 中
module.exports = {  productionSourceMap: false, }  //react中 //打开webpack.config.prod.js const shouldUseSourceMap = false 复制代码

CDN

内容分发网络，它可以实时地根据网络流量和各节点的链接、负载情况以及到用户的距离和响应时间等综合信息将用户的请求从新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的情况，提升用户访问网站的响应速度。因此能够经过将资源部署在CDN上来提升响应速度，提升用户体验

预渲染

简单来讲，就是将浏览器解析JavaScript动态渲染的工做，在打包阶段完成了（只构建了静态数据）。换个说法，在构建过程当中，webpack经过使用prerender-spa-plugin插件生成静态结构的html

// 一、安装prerender-spa-plugin
npm install prerender-spa-plugin --save-dev  // 二、安装vue-meta-info npm install vue-meta-info --save-dev   // 三、相关配置 <!-- webpack.prod.conf.js --> // 预渲染配置：在webpack.prod.conf文件中加入 const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer  // 在 plugins 中加入 new PrerenderSPAPlugin({  // 生成文件的路径，也能够与webpakc打包的一致。  // 下面这句话很是重要！！！  // 这个目录只能有一级，若是目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。  staticDir: path.join(__dirname, '../dist'),   // 对应本身的路由文件，好比a有参数，就须要写成 /a/param1。  routes: ['/', '/first', '/second', '/third', '/fourth', '/userCenter/userFirst','/userCenter/userSecond','/userCenter/userThird'],   // 这个很重要，若是没有配置这段，也不会进行预编译  renderer: new Renderer({  inject: {  foo: 'bar'  },  // headless: false,  renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，二者的事件名称要对应上。  args: ['--no-sandbox', '--disable-setuid-sandbox']  })  })  // 四、在main.js中 import MetaInfo from 'vue-meta-info'  new Vue({  el: '#app',  router,  components: { App },  template: '<App/>',  // 添加mounted，否则不会执行预编译  mounted () {  document.dispatchEvent(new Event('render-event'))  } }) 复制代码

注意：路由模式必须为 history ，若是不设置 history 模式，也能运行和生成文件，每一个 index.html 文件的内容都会是同样的

Service Worker

ServiceWorker 是运行在浏览器后台进程里的一段 JS，它能够作许多事情，好比拦截客户端的请求、向客户端发送消息、向服务器发起请求等等，其中最重要的做用之一就是离线资源缓存。

ServiceWorker 拥有对缓存流程丰富灵活的控制能力，当页面请求到 ServiceWorker 时，ServiceWorker 同时请求缓存和网络，把缓存的内容直接给用户，然后覆盖缓存

注意：须要HTTPS才能使用ServiceWorker

HTTP缓存

HTTP缓存通常分为两类：强缓存(本地缓存)、协商缓存(304缓存)

普通刷新会启用协商缓存

在地址栏输入网址、经过连接引入资源等状况下，浏览器才启用强缓存

强缓存(200)。本地缓存是最快速的一种缓存方式，只要资源还在缓存有效期内，浏览器就会直接在本地读取，不会请求服务端。在chrome控制台的Network选项中能够看到该请求返回200的状态码，而且Size显示from disk cache或from memory cache。强缓存能够经过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

协商缓存(304)。协商缓存，顾名思义是通过浏览器与服务器之间协商过以后，在决定是否读取本地缓存，若是服务器通知浏览器能够读取本地缓存，会返回304状态码，而且协商过程很简单，只会发送头信息，不会发送响应体。

协商缓存能够经过设置两种 HTTP Header 实现：Last-Modified 和 ETag

首先在精确度上，Etag要优于Last-Modified

第二在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只须要记录时间，而Etag须要服务器经过算法来计算出一个hash值

第三在优先级上，服务器校验优先考虑Etag

缓存优先级：Service Worker -> Memory Cache(内存缓存) -> Disk Cache(硬盘缓存) -> Push Cache(推送缓存)

Push Cache 只在会话（session）中存在，会话结束就被释放，并且缓存时间很短

HTTP2

HTTP2 四个新特性：

• 多路复用，无需多个TCP链接，由于其容许在单一的HTTP2链接上发起多重请求，所以能够不用依赖创建多个TCP链接。
• 二进制分帧，将全部要传输的消息采用二进制编码，而且会将信息分割为更小的消息块。
• 头部压缩，用HPACK技术压缩头部，减少报文大小
• 服务端推送，服务端能够在客户端发起请求前发送数据，换句话说，服务端能够对客户端的一个请求发送多个相应，而且资源能够正常缓存。

server {
 listen 443 ssl http2; } 复制代码

资源预加载

提早加载资源，当用户须要时，能够直接从本地缓存中渲染。

preload

页面加载的过程当中，在浏览器开始主体渲染以前加载

//对sty1e.cs5和 index.js进行pre1oad预加载
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="index.js" as="script">  复制代码

prefetch

页面加载完成后，利用空闲时间提早加载

//对资源进行 prefetch预加载
<link rel="prefetch" href="next.css"> <link rel="prefetch" href="next.js"> 复制代码

dns-prefetch

//对特定域名进行预解析
//将静态资源只放在一个域名下面，能够有效减小dns的请求 <link rel=”dns-prefetch” href=”//fonts.googleapis.com”> 复制代码

异步无阻塞加载JS

异步加载 js 文件，而且不会阻塞页面的渲染。

普通的script标签在开始解析和解析的过程当中，会中止解析dom

defer

<script src="d.js" defer></script> <script src="e.js" defer></script>
复制代码

在其余同步脚本执行后，DOMContentLoaded 事件前 依次执行 d.js, e.js。

async

<script src="b.js" async></script>
<script src="c.js" async></script> 复制代码

当脚本下载完后当即执行。（二者执行顺序不肯定，执行阶段不肯定，可能在 DOMContentLoaded 事件前或者后 ）

defer和async都不会中止解析dom

「webp」

「webp」 是一种新的图片格式，它的体积只有只有 「jpeg」的2/3，将图片资源大量换成 「webp」 格式能够加快请求的速度

可是webp存在浏览器兼容问题，使用前须要判断浏览器是否支持

loading加载

经过添加一个加载状态，可让用户在视觉上不会以为慢

也能够经过骨架屏加载，在感官上内容出现的流畅不突兀

最后，若是你们想和我一块儿讨论探索前端，能够关注一下个人公众号，不按期更新干货，更可加入技术群交流讨论。

本文使用 mdnice 排版