======================
Code Split (코드 분할)
======================

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

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

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

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

.. code-block::

    splitChunks: {

        cacheGroups: {

            commons: {

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

            name: 'vendor',

            chunks: 'all',

            },

        },

    },

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

swiper.vue 내..

.. code-block:: html

    <sciprt>

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

    import 'swiper/css/swiper.css';

    export default {

        …

    }

    </script>

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

.. code-block:: javascript

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

.. note::

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

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