Amplify의 bundle 크기를 5MB 줄였습니다.

자신이 운영하고 있는 서비스( VRCSnap! )의 PageSpeed ​​Insights를 오랜만에 측정하면 모바일 스코어가 힘들어졌다

VRCSnap은 이런 느낌의 VRChat 관련 아바타가 찍혀있는 이미지 트윗을 소개하는 서비스입니다

Nuxt, Amplify (AppSync) 환경에서 만들고 있습니다.



그래서 중요한 점수는 ...



니, 너에게 ... (PC는 87이었다)

twitter의 wiget.js로드를 body 태그에 넣거나 (body : ture 포함)

nuxt.config.js

script: [
    { src: 'https://platform.twitter.com/widgets.js', body: true }
],

@nuxtjs/device 을 넣어 모바일 때만 트윗 읽기 수를 줄여 48까지 올릴 수 있었습니다



나중에 webpack을 작게 할 정도라고 생각하고 bundle 사이즈를 보면



aws-sdk와 @aws-amplify

어떻게든 걸까 생각해 보면 Amplify 공식적으로 정확하게 좋은 기사

지금까지 amplify.js는 다음과 같이 했지만, 이것이라면 위의 이미지처럼 aws-sdk를 모두 가져 오기 때문에 꽤 무겁습니다.

amplify.js

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

그래서 사용하는 카테고리만 가져오도록 한다.

amplify.js

import Amplify from '@aws-amplify/core';
import API from '@aws-amplify/api';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

개별 구성 요소도 aws-amplify가 아닌 @aws-amplify/api에서 가져옵니다.

import API, { graphqlOperation } from '@aws-amplify/api'

그러면 bundle 크기가 5MB 정도 줄어들었습니다.



PSI 점수도 63으로



뭐, 어떻게든 50을 넘었다···!

후에는 vue-awesome-swiper(카루셀)가 상당히 무겁거나 하기 때문에, 여러가지 정리합니다

이런 느낌으로 Amplify가 무겁다! 라고 말하는 사람의 참고가 되시면 다행입니다