cdn缓存html对seo_Vue CLI 2u00263 下的项目优化实践CDN Gzip Prerender

作者｜郑昊川

编辑｜覃云

出处丨前端之巅

本文经作者授权转载，原文链接：

https://juejin.im/post/5b97b84ee51d450e6c7492f6?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com

这些优化方案适用于 Vue CLI 2 和 Vue CLI 3 , 文章紧张基于 Vue CLI 2 进行先容，关于如何在 Vue CLI 3 中进行干系的 webpack 调度，我已经放在了 vue-cli3-optimization 这个仓库下，并配有详细的注释，且额外添加方便 Sass 利用的 loader，利用 Sass 时无需再在每个须要引入变量和 mixin 的地方，每次都很麻烦的 @import。
下面将详细先容这些优化方案的实践办法和效果。

和很多小伙伴一样，我在开拓 Vue 项目时也是基于官方 vue-cli@2 的 webpack 模版，但随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大，尤其是 vendor.js, 乃至会达到 2M 旁边。
再加上又是单页运用，这就会导致在网速较慢或者做事器带宽有限的情形涌现永劫光的白屏。
为理解决这个问题，我做了一些探索，在险些不须要改动业务代码的情形下，找到了三种有明显效果的优化方案 —— CDN + Gzip + Prerender。

我把这些方法整理了一下，放在了 Github 仓库 上 (https://github.com/HaoChuan9421/vue-optimization)， 意图通过不同的分支来展示不同的优化办法，对 Vue 项目性能的影响。
你可以直接克隆下来试一试，也得益于有 git 历史，你也可以很方便的查看详细的改动细节。
下面我将通过一个大略的项目来展示这三种优化方案的效果。

通过 vue-cli@2 的 webpack 模版天生，只包含最根本的 Vue 三件套 ———— vue、vue-router、vuex 以及常用的 element-ui 和 axios。
拆分两个路由——“首页”和“通讯录”，通过 axios 异步获取一个通讯录名单，并利用 element-ui 的表格展示。
直接 build，不做任何优化处理，以作参照。

构建后文件解释

1.app.css： 压缩合并后的样式文件。

2.app.js：紧张包含项目中的 App.vue、main.js、router、store 等业务代码。

3.vendor.js：紧张包含项目依赖的诸如 vuex，axios 等第三方库的源码，这也是为什么这个文件如此之大的缘故原由，下一步将探索如何优化这一块，毕竟随着项目的开拓，依赖的库也能会越来越多。

4 . 数字.js：以 0、1、2、3 等数字开头的 js 文件，这些文件是各个路由切分出的代码块，由于我拆分了两个路由，并做了路由

5.mainfest.js：mainfest 的英文有清单、名单的意思，该文件包含了加载和处理路由模块的逻辑。

禁用浏览器缓存，网速限定为 Fast 3G 下的 Network 图 (运行在本地的 nginx 做事器上)

可以看到未经优化的 base 版本在 Fast 3G 的网络下大概须要 7 秒多的韶光才加载完毕。

二、CDN 优化

1. 将依赖的 vue、vue-router、vuex、element-ui 和 axios 这五个库，全部改为通过 CDN 链接获取。
借助 HtmlWebpackPlugin, 可以方便的利用循环语法在 index.html 里插入 js 和 css 的 CDN 链接。
这里的 CDN 大部分利用的 jsDelivr 供应的。

<!-- CDN 文件，配置在 config/index.js 下 --><% for (var i in htmlWebpackPlugin.options.css) { %><link href=\公众<%= htmlWebpackPlugin.options.css[i] %>\"大众 rel=\"大众stylesheet\公众><% } %><% for (var i in htmlWebpackPlugin.options.js) { %><script src=\"大众<%= htmlWebpackPlugin.options.js[i] %>\"大众></script><% } %>

2. 在 build/webpack.base.conf.js 中添加如下代码，这使得在利用 CDN 引入外部文件的情形下，依然可以在项目中利用 import 的语法来引入这些第三方库，也就意味着你不须要改动项目的代码，这里的键名是 import 的 npm 包名，键值是该库暴露的全局变量。

webpack 文档参考链接：https://webpack.js.org/configuration/externals/#src/components/Sidebar/Sidebar.jsx

externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'element-ui':'ELEMENT', 'axios':'axios' }

3. 卸载依赖的 npm 包，npm uninstall axios element-ui vue vue-router vuex；

4. 删除 main.js 里 element-ui 干系代码。

详细细节可以查看 git 的历史记录。

比对添加 CDN 前后构建的文件

优化后：

优化前：

可以看出：

1.app.css： 由于不再通过 import 'element-ui/lib/theme-chalk/index.css', 而是直接通过 CDN 链接的办法引入 element-ui 样式，使得文件小到了 bytes 级别，由于它现在仅包含少量的项目的 css。

2.app.js：险些无变革，由于这里面紧张还是自己业务的代码。

3.vendor.js：将 5 个依赖的 js 全部转为 CDN 链接后，已经小到了不敷 1KB，实在里面已经没有任何第三方库了。

4 . 数字.js 和 mainfest.js：这些文件本来就很小，变革险些可以忽略。

同样，禁用浏览器缓存，网速限定为 Fast 3G 下的 Network 图 (运行在本地的 nginx 做事器上）

可以看出相同的网络环境下，加载从原来的 7 秒多，提速到现在的 3 秒多，提升非常明显。

而且更主要的一点是原来的办法，所有的 js 和 css 等静态资源都是要求的我们自己的 nginx 做事器，而现在大部分的静态资源都要求的是第三方的 CDN 资源，这不仅可以带来速率上的提升，在高并发的时候，这无疑大大降落的自己做事器的带宽压力，想象一下原来首屏 900 多 KB 的文件现在仅剩 20KB 是要求自己做事器的！

三、Gzip 优化

利用 Gzip 两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的韶光。

如何开启 gzip 压缩

开启 gzip 的办法紧张是通过修正做事器配置，以 nginx 做事器为例，下图是利用同一套代码，在仅改变做事器的 gzip 开关状态的情形下的 Network 比拟图：

未开启 gzip 压缩：

开启 gzip 压缩：

开启 gzip 压缩后的相应头：

从上图可以明显看出开启 gzip 前后，文件大小有三四倍的差距，加载速率也从原来的 7 秒多，提升到 3 秒多。

附上 nginx 的配置办法：

http { gzip on; gzip_static on; gzip_min_length 1024; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; gzip_vary off; gzip_disable \公众MSIE [1-6]\.\"大众;}

前端能为 gzip 做点什么？

我们都知道config/index.js里有一个productionGzip的选项，那么它是做什么用的？我们考试测验实行npm install --save-dev compression-webpack-plugin@1.x, 并把productionGzip设置为true，重新build，放在 nginx 做事器下，看看有什么差异：

我们会创造构建之后的文件多了一些 js.gz 和 css.gz 的文件，而且 vendor.js 变得更小了，这实在是由于我们开启了 nginx 的 gzip_static on; 选项，如果 gzip_static 设置为 on, 那么就会利用同名的.gz 文件，不会占用做事器的 CPU 资源去压缩。

前端快速搭建基于 node 的 gzip 做事

无法搭建 nginx 环境的前端小伙伴也可以按如下步骤快速启动一个带 gzip 的 express 做事器。

1. 实行 npm i express compression；

2. 在项目根目录下新建一个 serve.js, 并粘贴如下代码。

var express = require('express') var app = express() // 开启 gzip 压缩, 如果你想关闭 gzip, 注释掉下面两行代码，重新实行`node server.js` var compression = require('compression') app.use(compression()) app.use(express.static('dist')) app.listen(3000,function () { console.log('server is runing on http://localhost:3000') })

3. 实行 node server.js。

下图是 express 开启 gzip 的相应头：

四、Prerender 预渲染

大家都是知道：常见的 Vue 单页运用构建之后的 index.html 只是一个包含根节点的空缺页面，当所有须要的 js 加载完毕之后，才会开始解析并创建 vnode，然后再渲染出真实的 DOM。

当这些 js 文件过大而网速又很慢或者涌现猜想之外的报错时，就会涌现所谓的白屏，相信做 Vue 开拓的小伙伴们一定都碰着过这种情形。
而且单页运用还有一个很大的弊端便是对 SEO 很不友好。

那么如何办理这些问题呢？

SSR 当然是很好的办理的方案，但这也意为着一定的学习本钱和运维本钱，而如果你已经有了一个现成的 vue 单页运用，转向 SSR 也并不是一个无缝的过程。
那么预渲染就显得更加得当了。
只须要安装一个 webpack 的插件 + 一些大略的 webpack 配置就可以办理上述的两个问题。

如何将单页运用转为预渲染

1. 你须要将 router 设为 history 模式，并相应的调度做事器配置，这并不繁芜（https://router.vuejs.org/zh/guide/essentials/history-mode.html）。

2.npm i prerender-spa-plugin --save-dev。

3 . 在build/webpack.prod.conf.js下添加如下配置 (没有路由

const PrerenderSPAPlugin = require('prerender-spa-plugin') ... new PrerenderSPAPlugin({ staticDir: config.build.assetsRoot, routes: [ '/', '/Contacts' ], // 须要预渲染的路由（视你的项目而定） minify: { collapseBooleanAttributes: true, collapseWhitespace: true, decodeEntities: true, keepClosingSlash: true, sortAttributes: true } })

4. 将config/index.js里build中的assetsPublicPath字段设置为'/'，这是由于当你利用预渲染时, 路由组件会编译成相应文件夹下的index.html，它会依赖 static 目录下的文件，而如果利用相对路径则会导致依赖的路径缺点，这也哀求预渲染的项目最好是放在网站的根目录下（这个坑我已经在prerender-spa-plugin仓库提过ISSUE了，不过借助postProcess，自己再写一个正则表达式，也能实现，如果你有这方面的需求，可以参考下面 路由

5. 调度main.js：

new Vue({ router, store, render: h => h(App) }).$mount('#app', true) // https://ssr.vuejs.org/zh/guide/hydration.html

实行npm run build，你会创造，dist 目录和以往不太一样，不仅多了与指定路由同名的文件夹而且index.html早已渲染好了静态页面。

效果如何？

和之前一样，我们依然禁用缓存，将网速限定为 Fast 3G(运行在本地的 nginx 做事器上)。
可以看到，在vendor.js还没有加载完毕的时候（大概有 700 多 kB，此时只加载了 200 多 kB），页面已经完全的呈现出来了。
事实上，只须要index.html和app.css加载完毕，页面的静态内容就可以很好的呈现了。
预渲染对付这些有大量静态内容的页面，无疑是很好的选择。

路由

如果你的项目没有做路由

而且当这些 js 加载完毕后，又会在 head 标签重复创建这个异步的 script 标签。
虽然这个报错不会对程序造成影响，但是最好的办法，还是不要把这些异步组件直接渲染到终极的 html 中。
好在prerender-spa-plugin供应了postProcess选项，可以在真正天生 html 文件之前做一次处理，这里我利用一个大略的正则表达式，将这些异步的 script 标签剔除。
本分支已经利用了路由

postProcess (renderedRoute) { renderedRoute.html = renderedRoute.html.replace(/<script.src=\公众.[0-9]+\.[0-9a-z]\.js\公众><\/script>/,'') return renderedRoute }

除了这种办理方案，还有两种不推举的办理方案：

1 . 索性不该用路由

2. 将HtmlWebpackPlugin 的 inject字段设置为'head'，这样app.js,vendor.js,manifest.js就会插入到 head 里，并在异步的 script 标签上面。
但由于普通的 script 是同步的，在他们全部加载完毕之前，页面是无法渲染的，也就违背了 prerender 的初衷，而且你还须要对 main.js 作如下修正，以确保 Vue 在实例化的时候可以找到<div id=\公众app\公众>< /div>，并精确挂载。

const app = new Vue({ // ... }) document.addEventListener('DOMContentLoaded', function () { app.$mount('#app') }) 总 结

虽然官方的脚手架已经供应很多开箱即用的优化，比如 css 压缩合并，js 压缩与模块化，小图片转 base64 等等，但我们能做的还很多。
我没有提及代码级别的优化细节，也是希望给大家供应一些可实践的方案。

上述三种方案或多或少都会给你项目带来一些收益。
优化也是一门玄学，可研究的东西很多。
也希望其他小伙伴可以在评论区供应宝贵见地，或者直接向我的这个项目 vue-optimization 的 base 分支提交 PR，好的方案我会采纳并整理。

目前三种方案整合的终极结果我已经放在 master 分支下 (https://github.com/HaoChuan9421/vue-optimization/tree/master)， 你可以克隆下来并在此根本上开拓你的项目。