

Nuxtjsをローカルでビルドして、Serverless
frameworkの[こちら](https://github.com/serverless/examples/tree/master/aws-node-
vue-nuxt-ssr)を使ってAwsへデプロイしています。

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

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

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

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

[![画像の説明をここに入力](https://i.stack.imgur.com/JapnW.png)](https://i.stack.imgur.com/JapnW.png)

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**

[code]

    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')()
          ]
        },
      },
    };
    
    
[/code]

**plugin/ant-design-vue.js**

[code]

    import Vue from 'vue'
    import Antd from 'ant-design-vue/lib'
    
    Vue.use(Antd)
    
[/code]

**plugin/amplify.js**

[code]

    import Amplify, {Auth} from 'aws-amplify';
    import awsconfig from '../aws-exports';
    
    Amplify.configure(awsconfig)
    
[/code]

**package.json**

[code]

    {
      "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"
      }
    }
    
    
[/code]


CC BY-SA 4.0
2020-02-15T10:33:38.840
63070
2020-02-18T04:00:53.967
2020-02-18T04:00:53.967
35525
35525
question
aws vue.js nuxt.js aws-sdk
Nuxtのバンドルサイズを小さくすることは可能か