адрес проектаvue-adminприветственная звезда
исходный адресWoohoo.C code.live/Len too/list…
передовой
В последние месяцы я взял на себя планирование реконструкции старого проекта, сколько ему лет? Это front-end проект бронзового века, проект, в котором front-end и back-end находятся в одном котле, и инструменты упаковки вообще не используются.
- За кулисами
php+YIIвизуализировать страницу - внешний интерфейс
html,css,jsТри мушкетера плюсjQueryКопипаста сухая.
Переднего конца недостаточно для заднего конца. Если требования к внешнему интерфейсу не очень сложны, персонал внутреннего отдела иногда будет выполнять некоторую работу по внешнему интерфейсу.
Позже я также стал отвечать за разработку требований к этому проекту. После того, как я выдвинул несколько требований, я чувствую, что меня тошнит кровью для пользователя, который привык к модульной разработке ES6 плюс веб-пакет.
JS-файл во внешнем интерфейсе2000строка кода, несколько4-5000, не беда, если кода будет слишком много, ключ в том, что написанный код не имеет никаких спецификаций, начиная с файла
function funName () {}
function funName () {}
function funName () {}
...
// 或者是
$(function(){})
$(function(){})
$(function(){})
...
Это нормально, ключajaxОбработка обратного вызова для... 6-700 строк кода
Позже я посмотрел, с чем будет иметь дело такой длинный код, и результат был... Оказывается, цикл for занимает600Несколько строк кода.
Забудь об этом, я не хочу больше говорить, чем больше я говорю, тем больше я устаю.
Ведь бери деньги людей и спасай людей от бедствий. Есть еще работа, которую нужно сделать.
1. Планирование рефакторинга
Одна из самых больших проблем такого рода проектов заключается в том, что нет модульной разработки, и все функции написаны в одномjsв файле. После разработки нескольких требований я резюмировал следующие неэффективные процессы.
существующие проблемы
- Без модульной разработки
jsфайл тысячи строк кода. Уровень повторного использования кода низкий. Я слышал, что в некоторых компаниях есть десятки тысяч строк кода. Ищите их психологическую теневую зону -
PHPРазличный синтаксис шаблонов, сотрудники внешнего интерфейса сказали, что они не могут понять - Все файлы ресурсов добавляются вручную с номерами версий.
- Карту спрайтов нужно синтезировать вручную (это самое ямочное, да и эффективность особо низкая)
- Сжатие изображений также выполняется вручную.
- различные консоли
console.logВывод - ...
2. Доступ к модульной разработке
Учитывая, что текущий уровень интерфейса команды не очень высок, это легко использоватьvue, затем используйтеvue-cli3построить одинvueпроект, а затем выполните некоторые настройки для совместимости с существующими проектами.Эти конфигурации различаются в зависимости от проекта, поэтому я не буду вдаваться в подробности.
На самом деле использоватьvue-cli3Построенный проект помог нам решить большинство проблем.
- модульная разработка,
vueВстроенная поддержка модульной разработки - В файлах ресурсов вручную добавляются номера версий, используйте
webpackИмя упакованного файла будет иметьhashценность. Таким образом, проблема номера версии также решена.
Итак, давайте решим этоvue-cli3Проблемы, которые нам не помогли
3. Сжатие изображений
Нет соединенияwebpackПеред сжатием изображений мы все использовали онлайн-сайт сжатия изображений, помещали изображение, а затем генерировали сжатое изображение для использования.
Если есть только одно или два изображения, можно сказать, что если изображений много, этот метод определенно не эффективен.
Чтобы не работать сверхурочно, она должна быть автоматизирована. Освободите руки.
- Установите необходимые библиотеки
npm install img-loader imagemin imagemin-jpegtran imagemin-pngquant --save-dev
- существует
vue.config.jsСредняя конфигурация
Затем посмотрите на эффект после упаковкиnpm run build
- размер несжатого изображения
622kb
- Размер сжатого изображения
351kb
В принципе разницы не видно.
Примечание: попробуйтеproductionСреда сжимается, т.devНет необходимости сжимать в среде, что влияет на скорость упаковки.
4. Спрайт
Нет соединенияwebpackПрежде чем автоматически синтезировать спрайты, мы все пользовались онлайн-сайтом по синтезу спрайтов, закидывали туда кучу маленьких картинок, а потом сами измеряли.background-positionчтобы расположить фоновое изображение. Когда несколько изображений имеют разный размер.background-positionРасчет более хлопотный.
4.1 Автоматический синтез спрайтов
- Установить зависимости
npm install postcss-sprites --save-dev
- существует
postcss.config.jsДобавить конфигурацию
Затем в коде вы можете напрямую ссылаться на изображение
4.1 Группировка спрайтов
Если ссылаться на много маленьких изображений, результирующий спрайт в конечном итоге будет большим. В это время вам нужно сгруппировать спрайты. Спрайты одного модуля объединены в один. так же
- Исправлять
postcss.config.jsконфигурация, добавитьgroupByАтрибуты
Если вам нужно сгруппировать, просто создайте новый каталог в assets/sprites, картинки в этом каталоге будут объединены в одно изображение спрайта.
5. Используйте vw,vh адаптивный
Предыдущие проекты использовалиpxв пикселях, а размер черновика дизайна1920x938.
существует1920*1080Это нормально видеть его на экране продукта, но у некоторых клиентов есть ноутбук, и он слишком велик, чтобы использовать ноутбук для просмотра. Никакой адаптации не делается.
Если вы хотите взять один за другимpxПревратиться вremилиvw/vhЕсли да, то нагрузка огромная.
Есть ли инструмент для прямого преобразования текущегоpxПреобразовать напрямую вvw/vhШерстяная ткань?
Наверняка есть!postcss-px-to-viewport
- Установить зависимости
npm i postcss-px-to-viewport --save-dev
- Исправлять
postcss.config.jsконфигурация файла
Через F12 можно узнать, что всеpxединицы были преобразованы вvw
6. productionОкружение автоматически удаляетсяconsole.log
Помните, что есть требование удалить все элементы в проектеconsole.logКод, я тогда запутался, там столько страниц.
использоватьvscodeГлобальный поиск, нашел десятки страниц с этим утверждением.
Если удалять все вручную, то это долго и неэффективно. Так что я думал удалить его через плагин
- Установите необходимые библиотеки
npm install babel-plugin-transform-remove-console --save-dev
- Исправлять
babel.config.jsнастроить
существуетnpm run buildавтоматически удаляется, когдаconsole.log
7. Другие оптимизации
Если у вас есть лучшие практические методы, добро пожаловать в область комментариев за советом! !
адрес проектаvue-adminприветственная звезда
Добро пожаловать, чтобы следовать
Добро пожаловать в общедоступный номер»разработка кода», делясь последней технической информацией каждый день