nuxt打包ssr部署，谷歌云appEngine疑点问题！轻松解决一切打包难点。快速部署网站！seo优化，字体优化预加载，防止字体卡顿，打包压缩等！！

简单简介：

本项目讲解，文件打包部署谷歌云appEngine问题，seo优化，字体加载，打包压缩等问题！！据上述以我开发出现问题的角度讲解。

问题1:字体优化

问题详解：当我们上传外部字体时候！会发现刷新页面时，字体会有闪烁的切换的效果。这很影响页面的观感程度！当我查询很多资料的时候会发现都很难去解决问题！！

解决问题：我这里用的是nuxt.js,使用ssr模式，理解下原理就可以知道他文件是先处理js文件在去处理，css渲染的状态.通过这个流程。我们把字体包先给他预加载字体包。在nuxt.config.js里预加载字体包以及css文件的预加载。注：一定要把字体包，以及加载字体包的css文件需要放入静态static文件里！！！

问题2:seo优化

问题详解:seo优化是为了你的页面更容易的被搜索引擎爬取到而衍生出的一种优化方案。因为vue渲染的时候不会被编译，所以导致搜索引擎无法搜索，所以我们使用了nuxt.js进行服务器编译。

解决问题：我们可以了解seo优化的本质，进行页面优化。优化方案：关键词。查看搜索频率关键词，少使用div多使用h标签。注（一个页面只能使用一个h1标签，其他都可以重复）图片设置alt文字，在nuxt.config.js设置基础信息

问题3:打包压缩

问题详解：这里很简单，在vue打包也就打包gizp格式，将css分化等格式

问题解决：我们直接使用nuxt自带的'nuxt-precompress'，以及外部压缩神器依赖包'compression-webpack-plugin'

首先下载依赖：

npm install compression-webpack-plugin

在nuxt.config.js进行配置'nuxt-precompress':

export default {
    modules: [
    'nuxt-precompress',
  ],
  nuxtPrecompress: {
    gzip: {
      enabled: true,
      filename: '[path].gz[query]',
      threshold: 10240,
      minRatio: 0.8,
      compressionOptions: { level: 9 },
    },
    brotli: {
      enabled: true,
      filename: '[path].br[query]',
      compressionOptions: { level: 11 },
      threshold: 10240,
      minRatio: 0.8,
    },
    enabled: true, 
    report: false,
    test: /\.(js|css|html|txt|xml|svg)$/,
    // Serving options
    middleware: {
      enabled: true,
      enabledStatic: true,
      encodingsPriority: ['br', 'gzip'],
    },
  },
}

在nuxt.config.js进行配置compression-webpack-pluginu：

//导入依赖
const CompressionPlugin = require('compression-webpack-plugin');
ex