정적 파일의 자산 이름을 Nuxt로 고정

Nuxt generate 명령은 기본적으로 해시 값의 자산을 생성합니다.고정값으로 출력하려는 tips입니다.

build 속성의 filenames로 지정


nuxt.config.js로 부칩니다.filenames를 설정하면 웹 페이지의 output입니다.filename에 접촉해야 하기 때문에 옵션을 여기에 주십시오.
  • The build Property - NuxtJS
  • Output | webpack
  • const filenames = {
      app: () => '[id].js',
      chunk: () => '[id].js',
      css: () => '[id].js',
      img: () => '[path][name].[ext]',
      font: () => '[path][name].[ext]',
      video: () => '[path][name].[ext]',
    }
    module.exports = {
      build: {
        filenames,
      }
    }
    

    paylad 같은 static 디렉터리 이름 고정


    페이지 마이그레이션 시 api 호출을 실행하지 않는 full static generate가 Nuxt에서 구현되었습니다.
  • Going Full Static - NuxtJS
  • 성능의 측면에서 볼 때 당연히 이 기능을 발휘하고 싶지만, 이러한 상황에서payload와state는 js 파일을 생성하고, 기본적으로 그것을 저장하기 위한 디렉터리는generate에서 매번 이름이 바뀐다.따라서 여기도 고정값으로 지정된다.
    import { version } from './package.json'
    
    module.exports = {
      generate: {
        staticAssets: {
          version,
        },
      },
    }
    
    이번에 패키지에서 버젼을 당겼어요.

    파일 이름을 고정하려는 경우


    Be careful when using non-hashed based filenames in production as most browsers will cache the asset and not detect the changes on first load.
    이렇게 공식화된 것은 기본적으로 해시 값으로 운용하면 문제가 적지만 파일 이름을 고정시키려는 경우로
    예를 들어 대규모 SSG에서는 매번 전체 구축이 이뤄지지 않도록 업데이트 내용을 추적하고 차등 구축을 한다.그때 자산명이 변경되면 더 이상 구축할 수 없다는 참조.이 때 자산 이름을 고정값으로build/deploy/CDN purge 형식으로 프로그램을 업데이트해야 합니다.
    끝.

    좋은 웹페이지 즐겨찾기