Nuxt部署及优化

前情提要

公司虽然使用了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
            }
        }))
    }
}