前情提要
公司虽然使用了vue进行了前后端分离开发，但是在部署流程上没有实现分离，目前大部分项目部署的流程是前端代码打包发送到后端服务器的代码里。但是这套部署流程并不适用SSR的项目，也就是我们的Nuxt框架，这次针对影视版权中心的前台，使用了Nuxt进行了服务端渲染，所以部署流程也得有些变动。
部署流程
如上图(自绘，勿喷)所示，无论是部署node服务还是普通的vue spa项目，流程是没有太大区别的，唯一的区别就在于，node服务需要在服务器上启动。
我们采用codeup流水线来实现自动化部署，所以准备了四套环境，开发，测试，预发布，正式。
因为要在服务器启动服务，我们需要不仅要把编译出来的.nuxt文件打包，还要将一些基本配置都要打包到服务器，这点区别于vue其他spa项目，只需要dist文件。
这一步骤完成过后，我们打包发送到服务器，解压重启服务
mkdir -p 路径
tar zxvf 压缩包 -C 路径
supervisorctl restart 进程名称
这里我们使用supervisor来进程守护，细心的朋友可以发现，上面打包流程中，我将ecosystem.config.js也打包到服务器了，这是给pm2准备的配置包，我们为了统一使用了supervisor，两者皆可。
这一套流程下来，实现了自动部署node项目，之后只要服务器配置好nginx，我们就可以访问项目了。
性能优化
上面简单的讲述了部署流程，接下来介绍项目的性能优化，其实也就是一些基本的常规的优化。
- 利用 dns-prefetch 预处理 DNS, SEO信息优化等。
- 前台项目交互还不多，都是一些作品的展示，展示就面临着大量的图片加载，所以我们采用IntersectionObserver实现了图片的懒加载。
- 懒加载固然能优化首屏加载的性能，但是滚动过后依旧无法避免大量的图片加载，所以就采取了ServiceWorker来进行缓存，因为pwa主要是通过ServiceWorker实现的，它主要包括桌面图标，离线缓存和消息推送这三个方面，我们就用了@nuxtjs/pwa，如下图一些基本配置即可生成pwa，sw，简单快捷方便。
modules: ['@nuxtjs/pwa'],
pwa: {
icon: {
iconSrc: '/static/icon.png', // pwa添加到桌面的icon
sizes: [16, 120, 144, 152, 192, 384, 512]
},
manifest: { // 基本信息
lang: 'en',
name: '七猫版权中心',
short_name: '七猫版权中心',
display: 'standalone',
theme_color: '#F11010'
},
workbox: { // sw的工具
offlineAnalytics: true,
runtimeCaching: runtimeCachingList.map((runtimeCaching) => ({
// 运行时缓存，页面加载完过后，缓存图片用的
urlPattern: `${runtimeCaching}/.*`,
handler: 'staleWhileRevalidate',
expiration: {
maxAgeSeconds: 86400
}
}))
}
}性能报告（根据chrome的Lighthouse性能报告）
优化前的首页资源加载（服务器表现没有本地服务的性能高）
第一次刷新：
第二次刷新：
优化过后：
第一次刷新：
第二次刷新：
对比上面的资源加载可以看到，从5.6M优化到3M左右, DOMContentLoaded的平均时间也从1.6s 优化到600ms左右。
Lighthouse（这里就不贴多张图，结果基本接近，但是也会随着网络波动，分数有所起伏）:
优化前：
优化后：
新增页面（懒加载）:
因为pwa+sw的结合可以使我们离线了也可以继续访问。
Tips: 因为懒加载，上文配置pwa的时候添加了runtimecache，所以这里要是完全离线浏览的话，还是需要把页面滚动到底部，等图片全部加载完才可以实现离线加载。
总结
这次的性能优化也只是做一些简单的优化，其实还有页面缓存(lru-cache)，组件缓存(component-cache)都可提高性能，LightHouse也没有达到完美的100分，还是有很多优化的空间，革命尚未成功，同志仍需努力！