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