Vue.jsのバンドルファイルサイズを1/3に削減した話

Laravel-mixを使ってVue.jsを開発していた時、特に大したこともしていないはずなのにバンドルサイズが6.09MBにもなった。
このバンドルファイルを6.09MBから1.96MBに削減した話。

結論

各コンポーネント内でimportしているscssファイルが大きいと、その分コンポーネントが巨大になる。

webpack-bundle-analyzerで分析

webpack-bundle-analyzerを使えば各コンポーネントサイズが視覚的に分かります。
今回はLaravel-mixを使っているので webpack-bundle-analyzerを使いました。

すると何の変哲もないコンポーネントの多くが200kb以上のサイズになっていました。

原因

200kb以上あるコンポーネントの共通点を考えたところ、全てのコンポーネント内でscssを使っていました。
またそれらは特定のファイルをimportしていたのです。

HogeComponent.vue

<template>
    <div class="alert" @click="alert">
        alert表示
    </div>
</template>

<script>
export default {
    methods: {
        alert () {
            alert('アラートです')
        }
    }
}
</script>

<style lang="scss" scoped>
@import 'resources/sass/app.scss';

.alert {
    padding: 0 .7rem;
}
</style>

resources/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import '~bootstrap/scss/bootstrap';

$primary-color: #2F353A;
$secondary-color: #3A4248;
~ 略 ~

はい。毎回fontやらbootstrapが展開されます^q^

対策

別途必要な文だけのscssファイルを作って、そのファイルをvueでimportさせる。

HogeComponent.vue

<template>
    <div class="alert" @click="alert">
        alert表示
    </div>
</template>

<script>
export default {
    methods: {
        alert () {
            alert('アラートです')
        }
    }
}
</script>

<style lang="scss" scoped>
@import 'resources/sass/color.scss';

.alert {
    padding: 0 .7rem;
}
</style>

resources/sass/color.scss

$primary-color: #2F353A;
$secondary-color: #3A4248;
~ 略 ~

resources/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Bootstrap
@import '~bootstrap/scss/bootstrap';

@import 'resources/scss/color.scss';

所感

フロントに詳しい人なら当然の事なんでしょうね。。。

サーバーサイドがメインとはいえ、フロントの勉強も怠ってはいけないですね。