Vue CLI минимизируется для производства, но как можно сократить свойства и другие определения? - PullRequest
Новая
       84

Vue CLI минимизируется для производства, но как можно сократить свойства и другие определения?

1 голос
/ 14 апреля 2020

Я посмотрел на выходной файл (например, app.4a7888d9. js), который сгенерировал CLI Vue, чтобы увидеть, что фактически уменьшилось, и я увидел, что свойства объявлены в объекте «data», методы объявлены в методах объект, et c. сохранить свое первоначальное имя. То же самое со свойствами состояния Vuex.

Я не пытаюсь полностью запутать свой код, но я использую довольно длинные описательные имена, которые могли бы принести пользу минимизации. Пожалуйста, не ненавидите, но пример наихудшего сценария для имени свойства, которое у меня есть, это scheduleTransactionConditionActiveComponent

Есть ли лучший способ добиться минимизации, кроме того, что Cli делает по умолчанию? Если я должен использовать другой пакет для этого, есть ли такой, который проверен для vue?

1 Ответ

1 голос
/ 14 апреля 2020

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 также рекомендуют выборочное искажение свойств (например, применяя его только к именам, которые соответствуют regexp). Например, вы можете настроить 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).

...