Develop Note by J.S.

1. Keep-Alive 동적 Component 는 컴포넌트의 동적 렌더링이 필요할 때 많이 사용되고 있습니다. 하지만 활성화 된 컴포넌트에서 다른 컴포넌트로 전환 하였을 때 기존 컴포넌트의 Unmount와 동시에 데이터가 모두 소멸되는데, 다시 해당 컴포넌트로 돌아갔을 때, 이전 작업했던 내용을 유지하고자 할 때 Keep-Alive 기능을 사용합니다. 2. Include / Exclude 기본적으로 KeepAlive는 모든 컴포넌트에 대하여 캐시를 생성합니다. Include / Exclude 옵션으로 캐시로 관리할 특정 컴포넌트만 지정할 수 있습니다. 3. Vue-Router에서 Children으로 속한 Path 별 Component의 렌더링 시에는 아래와 같은 방법으로 캐싱이 가능합니다.

배포 시 남아있는 Cache로 인해 각 chunk 파일들이 cache된 파일을 다운받아 즉각적으로 수정내용이 반영되지 않아 보이는 경우에는 Output 파일에 hash값을 추가하면 해결 할 수 있습니다. module.exports = { configureWebpack: (config) => { config.output.filename = 'js/[name].[chunkhash].js'; config.output.chunkFilename = 'js/[name].[chunkhash].js'; }, }

다중 Vue Instance로 여러 페이지 생성 시에는 vue.config.js에서 각 Path별 entry 경로를 설정하여 사용합니다. module.exports = { pages: { index: { entry: 'src/main.ts', template: 'public/index.html', filename: 'index.html', }, separate: { entry: 'src/pages/separate-page/main-separate-page.ts', template: 'public/separate/index.html', filename: 'separate/index.html', }, }, } 여기서 Production 빌드로 배포 시에 각 인스턴스에 쓰인 css파일이 하나의 chunk파일에..