Vue CLI는 운영 환경을 위해 최소화되지만 속성 및 기타 정의도 어떻게 단축할 수 있습니까?

Vue CLI는 운영 환경을 위해 최소화되지만 속성 및 기타 정의도 어떻게 단축할 수 있습니까?

Vue CLI가 생성한 출력 파일(예: app.4a7888d9.js)을 보고 '데이터' 개체에서 선언된 속성, 메서드 개체에서 선언된 메서드 등이 원래 이름을 그대로 유지하고 있음을 확인했습니다.Vuex 상태 속성과 동일합니다.

나는 내 코드를 완전히 난독화하려는 것은 아니지만, 나는 최소화의 이점을 얻을 수 있는 다소 긴 설명적 이름을 사용한다.싫어하지는 마십시오. 그러나 내가 가지고 있는 속성 이름의 최악의 시나리오의 예는 scheduledTransactionConditionActiveComponent입니다.

CLI가 기본적으로 실행하는 것 외에 최소화를 실현하는 더 좋은 방법이 있습니까?다른 패키지를 사용하는 경우 vue용으로 검증된 패키지가 있습니까?

Vue CLI 사용terser-webpack-plugin디폴트로는 속성 망글링은 디세블로 되어 있습니다.다음과 같이 Vue 구성에서 이 기능을 사용하도록 설정할 수 있습니다.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      const opts = args[0]

      opts.terserOptions.mangle = {
        ...opts.terserOptions.mangle,
        properties: true, // mangle all property names
      }

      return args
    })
  }
}

또한 Terser 문서에서는 속성 망글링(예를 들어 일치하는 이름에만 적용하는 등)을 선택할 것을 권장합니다.예를 들어, 밑줄로 끝나는 속성만 망글하도록 Terser를 설정할 수 있습니다.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      const opts = args[0]

      opts.terserOptions.mangle = {
        ...opts.terserOptions.mangle,
        properties: {
          regex: /_$/, // mangle property names that end with "_"
        },
      }

      return args
    })
  }
}

주의: 이 기능은 데이터 소품에는 적합하지만 컴포넌트 이름(즉, 속성 이름)에는 적합하지 않습니다.components).

언급URL : https://stackoverflow.com/questions/61198657/vue-cli-minifies-for-production-but-how-can-properties-and-other-definitions-al