1

Nuxtjsをローカルでビルドして、Serverless frameworkのこちらを使ってAwsへデプロイしています。

デプロイ後のインフラの動作は、下記のような形で行われます。(若干端折ってるかもですが)

  1. LambdaでNuxtjsを実行
  2. API Gatewayへレスポンス
  3. API Gatewayからクライアントへレスポンス

ここの1〜2ですが、Lambdaから返却できるレスポンスサイズが最大で6MBと制約されおり、それを超えてレスポンスしようとしたところ、LambdaとAPIGatewayが連携できず、3のところで502エラーをクライアントへ返してしまいます...。

502となっているのは、「https://xxx-example.com/_nuxt/xxxxx.js」のJSファイルで、内包しているものを調べたら、こちらの画像のような状態でした。(その他軽量なJSファイルは返せています)

画像の説明をここに入力

Ant-DesignとAmplifyを使用するプロジェクトで、両方をNPMで利用するとNuxtjsでビルドされるJSサイズがとても大きくなってしまいます・・なんとかNuxtjsのビルド結果のJSサイズを小さくできないでしょうか?

個人的には下記のいずれかの方法あれば最高かなと考えています。

  • _nuxt/xxxx.jsたちを自分の指定したパッケージでバンドル
  • Amplify,Ant-DesignをNPMではなくCDN読み込み(CDNで読んでかつVueの中でimportは可能でしょうか?)
  • Amplify,Ant-Designいずれかのバンドルサイズを小さくする秘伝の技

宜しくお願いいたします。


nuxt.config.js

module.exports = {
  mode: 'spa',

  head: {
    title: process.env.npm_package_name || '',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },

  srcDir: './',

  loading: {color: '#fff'},

  css: [
    'ant-design-vue/dist/antd.css'
  ],

  render: {
    compressor: false
  },

  plugins: [
    {src: '@/plugins/ant-design-vue.js', mode: 'client'},
    {src: '@/plugins/amplify.js', mode: 'client'}
  ],

  build: {
    extractCSS: true,
    analyze: true,
    postcss: {
      plugins: [
        require('postcss-preset-env')({
          features: {
            'nesting-rules': true,
          }
        }),
        require('postcss-custom-properties')(),
        require('postcss-nested')()
      ]
    },
  },
};

plugin/ant-design-vue.js

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'

Vue.use(Antd)

plugin/amplify.js

import Amplify, {Auth} from 'aws-amplify';
import awsconfig from '../aws-exports';

Amplify.configure(awsconfig)

package.json

{
  "name": "xxx-xxxxx",
  "version": "1.0.0",
  "description": "xxxxx",
  "main": "index.js",
  "engines": {
    "node": ">=10.16.3"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest",
    "deploy": "npm run build && sls deploy -v",
    "start-server": "npm run build && node index.js",
    "start-sls": "npm run build && sls offline start"
  },
  "dependencies": {
    "ant-design-vue": "^1.4.4",
    "aws-amplify": "^2.2.5",
    "nuxt": "^2.6.3",
    "nuxt-start": "^2.6.3",
    "postcss-custom-properties": "^9.0.2",
    "postcss-nested": "^4.2.1",
    "postcss-preset-env": "^6.7.0",
    "serverless-http": "^2.3.1"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "serverless-domain-manager": "^3.2.1",
    "serverless-offline": "^4.10.0",
    "vue-jest": "^4.0.0-0"
  }
}

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。