Code Split (코드 분할)

패키지 설치(외부 라이브러리가 많아진다면)로 인해 번들링 파일이 커지는 경우

코드 분할을 통해 해결이 가능합니다.

  1. 전역적으로 사용하는 패키지인 경우(예: lodash)

frontend/build/webpack.common.js 내..

splitChunks: {

    cacheGroups: {

        commons: {

        test: /[\\/]node_modules[\\/](vue|vue-router|vuex|lodash)[\\/]/,

        name: 'vendor',

        chunks: 'all',

        },

    },

},
  1. 특정 화면에서 사용하는 패키지인 경우 (예: swiper)

swiper.vue 내..

<sciprt>

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';

import 'swiper/css/swiper.css';

export default {

    …

}

</script>

router/index.js 내에서 해당 컴포넌트 lazyload 적용

const viewSwiper = () => import(/\* webpackChunkName: "chunk/view-swiper" \*/'../views/swiper.vue');

Note

특별한 경우를 제외하고 lzayload를 적용하는 것을 권장합니다.

참조. https://v4.webpack.js.org/guides/code-splitting/