Browserify + vue + HTML minify

Question

Я использую эликсир вместе с browserify. В мои компоненты VUE я включаю шаблоны из HTML-файлов, например:

Vue.extend({
    template: require('./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

Работает как положено. Однако, если я бегу gulp --production, HTML не сжимается в созданном файле.

То, что я хотел бы добиться, это удалить все ненужные символы табуляции, пробелы, символы новой строки, комментарии из включенных файлов HTML.

Есть пакет под названием gulp-minify-html, но я не знаю, как, если бы я мог использовать этот для решения этой проблемы.

Кто-нибудь здесь делал что-то подобное?

Answer 1

Посмотрите на vueify. Минимизация автоматически применяется к шаблону при компиляции с NODE_ENV=production.

В этом случае вам также не нужно помещать HTML-файл в отдельный файл. Но вы можете при необходимости: просто опустите <template> заблокируйте и добавьте шаблон к объекту module.exports как обычно:

<script>
    module.exports = {
        template: require('./template1.html'),
    };
</script>

Исследование

Таким образом, на самом деле его минификация является чисто декоративной. Как следует из списка зависимостей, vueify зависит от html-minifier.

Давайте посмотрим на код:

// production minifiers
if (process.env.NODE_ENV === 'production') {
  var htmlMinifier = require('html-minifier')
  // required for Vue 1.0 shorthand syntax
  var htmlMinifyOptions = {
    customAttrSurround: [[/@/, new RegExp('')], [/:/, new RegExp('')]]
  }
}

Единственный вариант здесь customAttrSurroundТаким образом, все остальное будет взято из значений по умолчанию.

Результат

У нас есть несколько вариантов здесь:

1. Исправьте источник один раз. Просто добавьте свой конфиг здесь.
2. Создать проблему на GitHub. Конфигуратор Minifier обязательно должен быть включен в vue.config.js.
3. Потяните запрос.

Окончательное решение от asker

Код выше должен быть заменен этим:

// production minifiers
if (process.env.NODE_ENV === 'production') {
  var htmlMinifier = require('html-minifier')
  // required for Vue 1.0 shorthand syntax
  var htmlMinifyOptions = {
    customAttrSurround: [[/@/, new RegExp('')], [/:/, new RegExp('')]],
    collapseWhitespace: true,
    removeComments: true
  }
}

Смотрите мой запрос на получение