Laravel + Vue + Vuetify로 번들 크기를 줄이려고합니다.

이 기사는 ZOZO 테크놀로지스 #4 Advent Calendar 2019 9일째 기사가 됩니다.
어제는 @ Ahiru _ Offushia l 씨의 일정 이상 스크롤하면 헤더가 고정하는 ScrollView를 단 한 줄로 구현하는 방법 이었습니다.

또한 올해에는 총 5개의 Advent Calendar가 공개됩니다.
ZOZO 테크놀로지스 #1 Advent Calendar 2019
ZOZO 테크놀로지스 #2 Advent Calendar 2019
ZOZO 테크놀로지스 #3 Advent Calendar 2019
ZOZO 테크놀로지스 #5 Advent Calendar 2019

환경

OS

Mac OS

Laravel 5.7

Vue 2.6

Vuetify 1.5

배경

Laravel-mix에서 템플릿 측에서 Vuetify.js를 사용한 결과, 아래와 같은 표시가 나오는 것을 깨달았습니다.


이 원인을 탐색하면서 줄이려고 했으므로 로그와 해결 방법을 남겨 둡니다.

해결까지의 길

원래 원인 조사

원래 app.js의 어느 부분이 비대화되어 있는지를 확인하기 위해 webpack-bundle-analyzer을 사용하여 분석을 수행했습니다.

이번에는 Laravel-mix를 사용하여 빌드를 했는데 webpack-bundle-analyzer를 Laravel에서 사용하려고했는데 동작이 잘되지 않았기 때문에 조사했는데 Laravel-mix용이 있었기 때문에 여기를 설치합니다.

npm install laravel-mix-bundle-analyzer --save-dev

그런 다음 webpack.mix.js에 다음 설명을 추가합니다.

webpack.mix.js

const mix = require('laravel-mix');
require('laravel-mix-bundle-analyzer');

if (!mix.inProduction()) {
    mix.bundleAnalyzer();
}

mix.bundleAnalyzer 부분에서 아무것도 지정하지 않는 경우, 디폴트의 설정이 됩니다만, 디폴트라고 빌드 후에 매회 webpack-bundle-analyzer의 화면이 표시되므로, 제 경우에는 옵션에 {openAnalyzer: false} 를 지정했습니다 .

이 상태에서 빌드하면 127.0.0.0:8888에서 bundle size의 상태를 확인할 수 있습니다.
자신이 처음 실행했을 때는 다음과 같은 구성이 되어 있었습니다.



이것을 보면, 대부분을 vuetify.js가 차지하고 있었기 때문에, 이것을 해결하면 절반 정도 고칠 수 있을 것 같은 생각이 되어 왔습니다.

Vuetify.js 줄이기

그런 다음 Vuetify.js의 크기를 줄이려고합니다.
Vuetify의 공식 가이드을 따라 작업했습니다.

import 방법 변경

앞의 가이드에서 알 수 있듯이 가져 오기를 전체 패키지에서 vuetify/lib 가져 오기로 변경하십시오.

import Vuetify from 'vuetify'
↓
import Vuetify from 'vuetify/lib'

이 시점에서 빌드를 수행하면 다음과 같은 에일러가 발생했습니다.

ERROR in ./node_modules/vuetify/lib/components/VRadioGroup/Vxxxxx.js
Module not found: Error: Can't resolve 'stylus-loader' in '/xxxxxxx'

stylus-loader가 can't resolve라는 것이기 때문에 설치

npm install stylus stylus-loader

다시 빌드하고 결과를 보면 절반 정도의 크기로


여기서 끝나도 괜찮습니다만, 아직 big인 것이 신경쓰지 않기 때문에, gzip화 대응을 실시합니다.

gzip화 대응

이 기사 을 참고로 gzip화를 실시합니다.
최종 크기는 다음과 같습니다.



궁극적으로 971KiB -> 118KiB까지 약 8배 감소에 성공했습니다!