Оптимизация размера пакета Vue — с 1,72 МБ до 94 КБ

внешний интерфейс Vue.js

1. Предпосылки

Недавно я создал сайт,uidea, который используется для помощи независимым разработчикам в разработке пользовательского интерфейса. В то время они просто сосредоточились на разработке. После развертывания они обнаружили, что скорость доступа вызывает беспокойство.
В конце концов, это небольшой водопроводный сервер, по сравнению с увеличением пропускной способности лучше посмотреть, можно ли оптимизировать код, это более рентабельно.

Это размер пакета до оптимизации.Этот парень достиг 1,72 М, а время загрузки малого водопровода идет прямо на более чем 3 с.Наложница не может этого вынести.

2. Цели

Это нужно оптимизировать, перед оптимизацией цель должна быть примерно поставлена, а цель должна быть измерена показателями, поэтому задаются два показателя:

  1. О времени загрузки страницы говорить нечего, по крайней мере, в пределах 1 с, чем быстрее, тем лучше
  2. Размер пакета контролируется в пределах 200k

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

Прежде всего, нам нужно определить, что такое размер пакета, в основном я имею в виду здесь.Размер входного пакета, соответствующий Vue — это app.js и app.css, после загрузки записи страницу можно хотя бы отобразить

Насколько должен быть оптимизирован размер пакета?

С одной стороны, vue-cli-service рекомендует не более 244К, с другой стороны, нам нужно найти бенчмарк, чтобы увидеть размер аналогичных пакетов веб-сайта, тогда у нас также есть эталон, я выбралmaterialpalette, я увидел, что размер его пакета около 150к.У меня функция посложнее, поэтому я взял 200к посредине двух как цель.

Зачем говорить здесьЦельШерстяная ткань? Потому что цель на самом деле очень важна, как говорится в старой поговорке, цель есть.Если цели нет, то легко сдаться на полпути в процессе реализации или остановиться, пройдя всего полшага.

Возьмем в качестве примера знакомства, если ваша цель найти девушку, есть большая вероятность, что вы не сможете ее найти, но если ваша цель состоит в том, чтобы поймать определенную девушку (например, Чжан Сан) в качестве подруги, тогда вероятность успеха Сильно возрастает, потому что вы можете целенаправленно готовиться к этой девушке

3. Схема

Цель поставлена, а затем поставлен план

Хотя мы впервые занимаемся оптимизацией сети, у нас уже был опыт оптимизации размера пакетов Android.Причина всегда одна и та же, поэтому я впервые подумал о следующих стратегиях.

  1. Обфускация кода
  2. Ресурсы размещены на cdn, потому что ресурсы легко разрабатывать, а ресурсы размещаются под ассетами, которые напрямую импортируются по require, что тоже большая голова.
  3. Бесполезные библиотеки удаляются, библиотеки с похожими функциями объединяются, используются библиотеки только с несколькими функциями, и посмотрите, сможете ли вы реализовать их самостоятельно
  4. gzip-сжатие
  5. Сторонние библиотеки также размещаются на cdn

1 - 3 Сначала были придуманы три схемы оптимизации, а затем я поискал в Интернете стратегии оптимизации, соответствующие Vue, и добавил последние две

Есть еще какие-то решения, например ленивая загрузка роутинга, но так как основной контент этого сайта сосредоточен на главной странице, то это не рассматривается (хороших вещей много, но лучше подстраиваться под местные условия)

Итак, всего установлено 5 стратегий оптимизации, и начнется следующая

4. Исполнение

1. Обфускация кода

Про обфускацию кода много не скажешь.С одной стороны, это экономит размер пакета, а с другой стороны может увеличить сложность декомпиляции.Конфигурацию обфускации Vue я прямо искал в интернете (ведь мне надо стоять на плечах гигантов) следующим образом

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: (config) => {
    //  引入uglifyjs-webpack-plugin
    let UglifyPlugin = require('uglifyjs-webpack-plugin');

    if (process.env.NODE_ENV == 'production') {
      // 压缩混淆
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
}
    }
  }
}

2. Поместите ресурсы на cdn

Этот шаг также легко сделать, все ресурсы размещены на платформе Alibaba Cloud, и это можно сделать за несколько минут.

3. Удалить бесполезную библиотеку

Этот шаг занял много времени, т.к. карта избавляет от хлопот при разработке, много библиотек ищется напрямую на гитхабе, вводится пряжа адд, и на этом готово, теперь нужно разбить на детали.

Добавьте --report после команды упаковки, чтобы увидеть статус упаковки.

yarn build --report

Первый - убрать ElementUi (около 158к после сжатия gzip).При разработке ElementUi и Vuetify перемешаны.Фактически достаточно одного Vuetify, а потом уже доделываются небольшие изменения интерфейса.

Потом есть lodash, используются только некоторые из этих методов, но весь размер у него не маленький, около 25к после сжатия gzip, поэтому я нашел исходники lodash и планировал извлечь несколько используемых методов, но код lodash вложенный и referenced Это слишком глубоко, поэтому я не хочу курить, поэтому я просто убил библиотеку и нашел несколько более чистых реализаций взамен.Основное время ушло на чтение исходников lodash.

Потом есть vuescroll.При реализации кастомизации стиля полосы прокрутки я лениво пользовался этой библиотекой и обнаружил, что размер этой библиотеки все-таки не маленький.После gzip-сжатия он почти 20к.Просто убей его и напиши стиль сам(эта вещь мне подсказывает Мы, кому сейчас лень, вернём в будущем другими способами 0_0)

Это убивает несколько библиотек с большими головками.

4. gzip-сжатие

Это решение, найденное в Интернете, добавьте некоторую конфигурацию непосредственно в vue.config.js, а затем вам нужно сделать соответствующую настройку в nginx.

// vue.config.js
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV == 'production') {
      // ...
      // gzip
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: /\.js$|\.html$|\.json$|\.css/,
        threshold: 10240,
        minRatio: 0.8
      }))
    }
    // ...
  }
}
// nginx 直接开启下面的配置
gzip_static on;

После упаковки таким образом будет сгенерирован файл .gz, и nginx будет автоматически использовать файл .gz.

5. Ставим сторонние библиотеки на cdn

В основном это касается библиотеки Vuetify, ведь размер gzip будет почти 50k, и быстрее выложить его на CDN.

Первый — удалить Vuetify из конфигурации упаковки.

module.exports = {
  // ...
  configureWebpack: (config) => {
    if (process.env.NODE_ENV == 'production') {
      // 第三方库不打包，使用 cdn
      config.externals = {
        vuetify: 'Vuetify'
      }
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
      config.externals = {
        vuetify: 'Vuetify'
      }
    }
  }
}

Затем вручную загрузите vuetify css и js в index.html.

<link href="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/vuetify/2.4.4/vuetify.min.js"></script>

На самом деле есть несколько лучших способов, которые можно передать в index.html через параметры веб-пакета и импортировать через ejs.Сейчас это относительно просто, поэтому я не буду этого здесь делать.

5. Эффект

Благодаря вышеуказанным стратегиям окончательный размер пакета оптимизирован с 1,72 МБ до 94 КБ.

6. Последующие действия

В целом эффект от оптимизации очевиден, но есть еще кое-что, что можно сделать в будущем:

  1. Более совершенная оптимизация, должна быть возможность комбинировать веб-пакет для более глубокой настройки.
  2. Интеграция сторонних библиотек на упомянутом выше cdn все-таки слишком разбросана непосредственно в index.html, что не является хорошей структурой проекта и не способствует последующему развитию.
  3. Есть еще много вещей, которые можно сделать для стандартизации последующей разработки кода, например, спецификация сторонней ссылки на библиотеку, введение ресурсов и т. д.
  4. Тест производительности перед каждым развертыванием, в основном, чтобы увидеть, соответствует ли скорость загрузки страницы стандарту.

Есть еще много вещей, которые можно сделать. Иногда, когда одна вещь сделана, достижение цели не является концом. Необходимо также учитывать сохранение цели.

Категории