[Nuxtjs] base64 인코딩할 이미지의 파일 크기 한도 변경

TL; DR

nuxt.config.js 의 build 속성을 사용하여 base64 인코딩할 수 있는 이미지의 파일 크기 제한을 변경할 수 있습니다.

개요

nuxtjs에서 웹 서비스의 자사 제품을 개발하고 운영하는 엔지니어입니다.

어느 날, 로고의 이미지를 변경해달라고 디자이너로부터 의뢰가 왔습니다만, 로고가 표시되었습니다.

뭔가 쿼리 밸러미터를 붙이는 등해, 이미지의 패스를 변경하면 해결합니다만, 무엇인가 다른 해결 방법이 없는지를 찾았는데, assets에 정적 파일을 두면, webpack이 정적 파일을 base64로 인코딩하고 html과 css에 퍼가는 것 같습니다. 하지만, 시도했는데, 아무래도 base64 인코딩해 주는 이미지의 파일 사이즈가 디폴트로 1KB로 정해져 있다 같기 때문에, 변경하고 싶습니다만, 방법을 찾아도 발견되지 않았기 때문에, 모처럼이라면이라고 생각해, 기사에 정리했습니다.

실제로 어떻게 할까

결론부터 말하자면, 아래와 같이 쓰면 base64로 인코딩해주는 정적 파일의 크기 상한을 변경할 수 있었습니다.

nuxt.config.js

module.exports = {
  extend(config, { loaders }) {
    // これで1MB以下のassetsディレクトリにある静的ファイルがbase64エンコードされます。
    loaders.imgUrl.limit = 100000
  },
}

이 static 와 loaders 가 어디에서 왔기 때문이라고 하면, 아래의 문서에 기재되어 있었습니다.
htps : // 그럼. 없는 xtjs. 오 rg / 아피 / 곤후

// loadersの中身
{
  file: {},
  fontUrl: { limit: 1000 },
  imgUrl: { limit: 1000 }, // デフォルトは1KB
  pugPlain: {},
  vue: {
    transformAssetUrls: {
      video: 'src',
      source: 'src',
      object: 'src',
      embed: 'src'
    }
  },
  css: {},
  cssModules: {
    localIdentName: '[local]_[hash:base64:5]'
  },
  less: {},
  sass: {
    indentedSyntax: true
  },
  scss: {},
  stylus: {},
  vueStyle: {}
}

모든 코드를 추적하지 않기 때문에 imgUrl의 속성이 imgUrl의 설정과 연결되어 있는지는 알 수 없지만 속성 이름에서 예측할 수 있었기 때문에 시도한 결과 base64 인코딩되었습니다.

그건 그렇고, base64로 인코딩되면 html에서 이렇게됩니다.

요약

이제 향후 이미지의 경로를 무리하게 변경하지 않아도 이미지에 의해 인코딩된 결과가 바뀌므로 브라우저 캐시에서 파일 내용이 변경되지 않는다는 문제는 회피될 것이라고 생각했습니다. 내용이 조금 틈새인 기분도 합니다만, 같은 문제로 곤란한 사람의 도움이 된다고 생각해, qiita에 정리했습니다. 끝까지 읽어 주셔서 감사합니다.