긴 데이터 URI의 코드 처리

Question

게임에 이미지와 동영상을 추가하기 위해 데이터 URI인 base64를 사용하는데, 여러 개의 동영상으로 게임을 만들려면 각 동영상의 코드가 500줄이 넘을 텐데 좋은 방법이 없을까요? 이런 유형의 파일을 처리하는 것이 좋습니다. 제가 실제로 한 일은 Mixin 파일을 만들고 base64를 반환하는 여러 함수를 만드는 것이었습니다.

export default{
    stage1(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
    stage2(){
        return "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAFkAdtZGF0AAADAAYF///........."
    },
}

Answer 1

저는 (webpack, Parcel, Rollup, Browserify 등)과 같은 번들러 를 사용하는 것이 좋습니다. 여러 파일로 프로그래밍할 수 있으며 배포하기 전에 번들러는 모든 파일을 하나의 파일로 병합(및 축소) 합니다.

webpack과 같은 번들러를 사용하면 다음과 같은 모든 데이터 URL을 포함하는 json 파일을 만들 수 있습니다.

으아악

응용 프로그램 스크립트 내:

으아악

그리고 애플리케이션 파일에서 json 파일을 가져올 수 있으며 이는 번들러 빌드 작업에 통합됩니다. 그리고 애플리케이션의 모든 파일이 포함된 단일 파일을 만듭니다.

webpack 및 프로젝트 설정 방법에 대한 자세한 내용은 문서를 확인하세요 . 답변으로 설명하기에는 너무 길고 이에 대한 좋은 기사/비디오가 이미 있습니다. (그러나 다른 번들러도 사용할 수 있습니다)

내 대답이 올바른 방향을 가리켰습니다.

업데이트:

작은 데모 프로젝트(node 및 npm이 설치된 경우) :

npm

을 사용하여 이 패키지를 설치하세요.

• html-inline-script-webpack-plugin
• html-웹팩-플러그인
• 네트워크 패키지
• webpack-cli

webpack의 기본 구성 파일 만들기:

으아악

데모 애플리케이션 코드는 다음과 같습니다.

으아악

데모 프로젝트 구조는 다음과 같습니다:

출력 HTML 파일만 생성되며 다른 모든 파일은 인라인됩니다.