[pwa][vue.config.js] 특정 컴포넌트를 pwa 에 배포되지 않게 설정하는 방법

상황

  • 개발중인 사이트를 앱으로도 배포하기 위해 pwa 기능을 추가함.
  • 관리자 화면을 추가하는 중.
  • 그런데 관리자 화면은 사용자앱에 포함되면 안되기때문에 pwa 설정에서 관련 컴포넌트를 모두 제외해야 함

vue.config.js

vue에서 화면을 구성할때 전제 조건이 있음.

  1. vue router 로 관리자 화면 컴포넌트를 빼냄
  2. 관련 컴포넌트들은 동적 import로 바인딩해야 함

프로젝트를 번들링하면(npm run build) chunk 라는 번들링 단위로 결과물이 생성됨. pwa 에서 캐시 목록에서 제외해주려면 반드시 동적으로 컴포넌트를 import해야함

router 설정

vue-cli로 프로젝트를 생성할때 따로 건드리지 않으면 아래와 같은 경로에 router설정 코드가 존재함

router 파일 경로
[project root]
 +- src
     +- router
         +- index.js          (+)
     +- views
         +- admin
             +- AdminPage.vue (+)
  • AdminPage.vue - 관리자 화면 entry point
  • router/index.js - vue rotuer 맵핑 파일

파일에 아래와 같이 동적 import로 관리자 화면 컴포넌트를 연결함

router/index.js
const routes = [
  ...,
 {
    path: "/console",
    name: "AdminConsole",
    component: () =>
      import(
        /* webpackChunkName: "admin" */ "../views/admin/AdminPage.vue"
      ),
  },
]
  • component: () => import(...) - 동적으로 컴포넌트를 로드하는 코드. 관련 컴포넌트들은 별도의 chunk(그냥 js파일 형태)로 생성됨.
  • webpackChunkName: "admin" - chunk 에 admin이라고 이름을 붙여줌. pwa설정에서 admin chunk는 제외할 예정(chunk name은 맥락에 맞게 내가 붙여주면 됨)

작동 방식 살펴보기

pwa에 추가 설정을 하기 전에 먼저 작동 방식을 알아보겠음.

위와같이 vue router에서 동적 import를 집어넣고 번들링하면 대충 아래와 비슷한 형태로 chunk들이 나타남.

TXT
  dist/js/chunk-vendors.b3d47488.js                   721.23 KiB            207.76 KiB
  dist/js/app.a3fbc79f.js                             146.68 KiB            41.76 KiB
  dist/precache-manifest.68689f814dfde7545ea9de0b8    2.62 KiB              0.95 KiB
  7f0f71c.js
  dist/service-worker.js                              2.06 KiB              0.86 KiB
  dist/js/admin.0eb6c880.js   (+)                     1.64 KiB              0.73 KiB
  dist/css/app.1202b911.css                           104.36 KiB            16.16 KiB
  dist/css/admin.4b1d0267.css (+)                     0.10 KiB              0.11 KiB

dist/js/admin.0eb6c880.js 와 dist/css/admin.4b1d0267.css 가 AdminPage.vue 및 안에 포함된 모든 자식 컴포넌트들의 최종 산출물들임.

그리고 dist/precache-manifest... 라는 파일이 있는데 pwa를 담당하는 workbox에서 이 파일에 적혀있는 chunk들을 읽어서 미리 캐시해두는 식.

precache-manifest
self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "529639008f69ed196cd8",
    "url": "/css/app.1202b911.css"
  },
  ...,
  {
    "revision": "529639008f69ed196cd8",
    "url": "/js/app.a3fbc79f.js"
  },
  ...,
  {
    "revision": "deeaf84505db9ff67b285e3d7eb2e9e6",
    "url": "/js/admin.0eb6c880.js"
  },
  {
    "revision": "deeaf84505db9ff67b285e3d7eb2e9e6",
    "url": "/css/admin.4b1d0267.css"
  },
]);
  • 아래쪽에 admin 관련 chunk들이 들어가 있음. 이걸 제외해야 함

vue.config.js 설정

설명이 길었으나 실제 admin chunk를 제외하는 설정은 간단함.

vue.config.js 파일을 열면 아래와 같은 설정 파일 내용이 보일텐데

vue.config.js
module.exports = {
  configureWebpack: (config) => { ... },
  pwa: {
    ...,
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      swSrc: "src/service-worker.js",
      excludeChunks: ["admin"],  //(+) 여기에 추가
    },
  }
}
  • excludeChunks: ["admin"] - admin 모듈은 pwa에서 캐시하지 않도록 함

excludeChunks 옵션을 추가해서 제외할 chunk의 이름을 배열 형태로 입력함

결과

다시 번들링하고(npm run build) 캐시될 파일 목록을 살펴보면 admin 관련 chunk들이 없어진걸 볼 수 있다.

precache-manifest
self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "529639008f69ed196cd8",
    "url": "/css/app.1202b911.css"
  },
  ...,
  {
    "revision": "529639008f69ed196cd8",
    "url": "/js/app.a3fbc79f.js"
  },
  ...,
  // 포함 안됨
]);
  • 파일에 붙은 숫자는 그때그때 달라짐