패키지 설치(외부 라이브러리가 많아진다면)로 인해 번들링 파일이 커지는 경우 코드 분할을 통해 해결이 가능합니다.
frontend/build/webpack.common.js 내..
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/](vue|vue-router|vuex|lodash)[\\/]/,
name: 'vendor',
chunks: 'all',
},
},
},
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를 적용하는 것을 권장합니다.