Nuxtjsをローカルでビルドして、Serverless frameworkのこちらを使ってAwsへデプロイしています。
デプロイ後のインフラの動作は、下記のような形で行われます。(若干端折ってるかもですが)
- LambdaでNuxtjsを実行
- API Gatewayへレスポンス
- 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"
}
}