Несколько хитростей, чтобы лучше сжать ваш пакет для продакшена
Нас часто разочаровывает размер пакетов, генерируемых webpack. Тем не менее, webpack поставляется с встряхиванием дерева и поддержкой UglifyES, что помогает уменьшить размеры пакетов.
Вот несколько советов и приемов, которые помогут лучше использовать эти функции.
1) Используйте модули ES для зависимостей
В стандартном шаблоне Vue для Vue установлен псевдоним vue.esm.js. Мы могли бы сделать то же самое с другими модулями, такими как Vuex и сторонние модули. Модули ES, в отличие от модулей CommonJS или AMD, можно анализировать статически, что необходимо для встряхивания дерева.
2) Используйте среду выполнения Vue, когда шаблон не требуется
К настоящему времени мы использовали псевдоним vue для vue.esm.js, который поддерживает встряхивание дерева, но, к сожалению, не устраняет компилятор, который отвечает только за компиляцию шаблонов.
Однако, когда и особенно когда все наши компоненты представляют собой JSX или однофайловые компоненты, которые скомпилированы заранее, и не требуется динамический шаблон, утилита компилятора будет означать только ненужные накладные расходы в 10–20 КБ. К счастью, мы смогли использовать псевдоним Vue для версии, предназначенной только для времени выполнения:
Обратите внимание, однако, что параметр template в ваших компонентах больше не работает и должен быть изменен на такие вещи, как функция render().
3) Убедитесь, что файлы исходного кода все еще находятся в форме модуля ES при загрузке Babel.
Оба es2015 и env предустановки по умолчанию преобразуют синтаксис модуля ES в формат модуля CommonJS. Убедитесь, что для обеих предустановок установлено "modules": false.
4) Объедините (некоторые из) ваши зависимости в node_modules
То есть, когда некоторые из сторонних зависимостей
- вносят значительный вклад в размер вашего окончательного пакета, и
- связаны устаревшими сборщиками, что добавляет много избыточного кода и / или не может встряхнуть дерево
Возможно, стоит попробовать повторно связать их с помощью webpack. Импортируйте несвязанную форму, чтобы проверить, работает ли она. Если нет, прочтите их файл конфигурации browserify / webpack и попробуйте еще раз… пока не добьетесь успеха. Это будет тяжелая работа, но если все будет сделано правильно, это может означать десятки килобайт: в моем собственном проекте я успешно уменьшил размер пакета с ~ 420 КБ до ~ 370 КБ.
5) По возможности загружайте только необходимые части ваших зависимостей
Библиотека случайных компонентов / диаграмм может легко занимать сотни килобайт или даже мегабайт. Однако не все поддерживаемые компоненты или диаграммы действительно нужны приложению. Что еще хуже, их записи по умолчанию не всегда находятся в формате модуля ES, а это означает, что вам нужно вручную включать только необходимые части. Их также сложно найти и правильно включить, но это того стоит.
6) Используйте возможности модуля ES в своем собственном коде
Например, не делайте этого:
Вместо этого сделайте это:
В отличие от поиска в 8-м разделе, имена функций в предыдущем коде (с надписью «плохо») обычно не могут быть сокращены компрессором. А вот имена функций во втором - можно.
7) Используйте краткие названия мутаций / действий
Я бы предложил двухбуквенный префикс для указания, к какому модулю принадлежит мутация или действие в хранилище Vuex, а затем описательное имя из одного или двух слов. Это не только предотвращает случайное использование одного и того же имени мутации в разных модулях, но и помогает уменьшить размер пакета без необходимости думать о том, какое имя обозначает какую мутацию или действие в каком модуле. Однако, когда приложение становится больше и мутации и / или действия должны фиксироваться / отправляться несколько раз, поиск может быть лучше для уменьшения размера пакета (см. Следующий раздел).
По той же причине при использовании модулей CSS с тегами <style module="{moduleName}"> используйте имена модулей с префиксом, чтобы предотвратить случайное столкновение имен с другими свойствами компонента, оставаясь при этом краткими (да, имена модулей CSS являются свойствами компонента во Vue).
8) Используйте поиск
Мутации могут повторяться неоднократно в виде строк, как и действия. Поиск не только уточняет тип мутации, предоставляя поддержку IntelliSense, но также подходит для сжатия.
Похоже, это немного накладные расходы, но факт в том, что его можно было бы хорошо сжать, если бы он никогда не индексировался по строкам.
Однако обратите внимание, что это само по себе не совсем уменьшает размер пакета. И наряду с необходимыми определениями переменных это может фактически увеличить размер пакета в небольших проектах. Но когда вы совершаете мутации много раз, увеличение размера будет компенсировано теми изменениями, которые были сохранены вызовами commit().
