• Удалите избыточные зависимости шаблона проекта
• Переместите общедоступные статические ресурсы в активы. Статические ресурсы должны быть размещены под ассетами, public будут копироваться только в dist, а файлы, которые не обрабатываются вебпаком, должны быть размещены, например, библиотеки, несовместимые с вебпаком, файлы, для которых необходимо указывать имена файлов и т. д.

до: 4,96 млн после: 4,12 млн

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

использоватьimage-webpack-loader

// install
npm i image-webpack-loader -D
// vue.config.js
chainWebpack: (config) => {
    if (isProd) {
        // 图片压缩处理
        const imgRule = config.module.rule('images')
        imgRule
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
    }
}

1. Если загрузка библиотеки imagemin не удалась во время установки или сборки, вы можете попробовать изменить источник, настроить хосты github и добавить его во время установки.--user=rootрешить
2. Поскольку изображение было вручную сжато с помощью онлайн-инструментов после загрузки изображения, эта часть улучшения невелика.

до: 4,12 млн после: 4,00 млн

webP — это новый формат изображений (2010 г.), запущенный Google, с таким же качеством, как png и jpg.совместимостьВсе в порядке, но производительность Apple не идеальна

Преобразование в изображение webP

Его можно сгенерировать вручную или путем добавления автоматизации сборки.

• вручную, вы можете использоватьwebP-converter, Житу и другие инструменты, но рекомендуется использовать официальный webP-конвертер, помимо удобства объем лучше Житу по всем аспектам при том же качестве.

./cwebp -q 75 login_plane_2.png -o login_plane_2.webp

• Автоматическая генерация, вы можете использовать image-min-webp или другие плагины webpack

Используется на странице (совместимо с более ранними версиями)

• используется в HTML,<picture>Совместимость с этикеткой

<picture>
    <source srcset="hehe.webp" type="image/webp">
    <img src="hehe.png" alt="hehe>
</picture>

• Используемый в CSS, он должен взаимодействовать с JS для вынесения суждений.

// main.js
window.addEventListener('DOMContentLoaded', () => {
    const isSupportWebP = document.createElement('canvas')
    .toDataURL('image/webp')
    .indexOf('data:image/webp') === 0
    document.documentElement.classList.add(isSupportWebP ? '' : '.no-support-webp');
})
// css
.support-webp .bg{
    background-image: url("hehe.webp");
}

.no-support-webp .bg {
    background-image: url("hehe.png");
}

1. Обязательно используйте исходное изображение для конвертации в webp, иначе это повлияет на громкость
2. Больших картинок проекта не много, максимальная картинка 400Кб после конвертации всего 48.9Кб

На этом этапе мы оптимизируем ситуацию, когда некоторые избыточные старые иконки SVG упакованы.Как правило, метод использования SVG в проекте заключается в создании JS в iconfont и последующем его внедрении. Этот метод

• Не интуитивно понятно, приходится каждый раз заходить в iconfont, чтобы копировать имя
• Каждый раз, когда вы добавляете, удаляете или меняете значок, вам нужно заменить весь JS
• не можемнагрузка по требованию, неиспользуемые также будут упакованы вместе, особенно когда пользовательский интерфейс меняет значки, старые значки, как правило, не удаляются. …
• Добавление пользовательского SVG не является дружественным, вы должны загрузить шрифт значка и добавить его вместе перед загрузкой.

Улучшенный игровой процесс SVG

• Добавить/изменить значки
  • Любой значок SVG, загруженный в интерфейсе загрузки iconfont или найденный в другом месте, помещается в icons/svg/
  • На странице используется глобальный компонент svg, и можно передать имя файла скопированного SVG.
• удалять
  • Просто удалите место, где он используется, а затем удалите соответствующий значок.

Для достижения вышеуказанного эффекта достаточно

• Представляем svg-sprite-loader

// install
npm i svg-sprite-loader -D
// vue.config.js
chainWebpack: (config) => {
    // SVG处理
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons/svg'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
    
}

• Создайте src/icons/svg и поместите в него значок, а затем автоматически импортируйте его через require.context веб-пакета.

// src/icons/index.js
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

// main.js
import '@/icons'

• Создать глобальный компонент ca-svg

// src/icons/index.js
import Vue from 'vue'
import CaSVG from '@/components/ca-svg'
Vue.component('ca-svg', CaSVG)

// src/components/ca-svg.vue
<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners" :style="svgStyle">
    <use :xlink:href="iconName" />
  </svg>
</template>
...
// name属性为必须字段，其他size或color可以自由定制

Оптимизация сжатия

SVG обычно имеет некоторую избыточную информацию, влияющую на объем, здесь мы можем использовать svgo-loader для дальнейшего сжатия.

// install
npm i svgo-loader -D

// vue.config.js
// 接上面svg的配置
...
.end()
.use('svgo-loader')
.loader('svgo-loader')
.end()

Видно, что на эту часть приходится большая доля поставщиков чанков.

Внедрить по требованию

Эта часть действительно была обработана. Конкретную операцию можно найти в документе ant-design-vue. В инструкции нет большой дыры, и эффект ожидаем.

Быстрый старт — Ant Design Vue

Удалите лишние компоненты

Некоторые компоненты используются нечасто, но глобально вводятся с помощью Vue.use(). Здесь глобальный импорт, который обычно не используется и не используется, удален, и он изменен на import() на странице

Эта часть, поскольку мы используем в проекте только несколько встроенных значков Ant, не может превышать 530 КБ. Согласно описанию документации Ant, это вызвано тем, что он вводит полное количество ICON.Сказано, что если текущее использование загружается по требованию, невозможно определить, будет ли пользователь менять значок в момент время выполнения, например настроенный ICON.

Перенаправить на локальный для управления

Эта проблема решена в React-версии Ant-Design (написание исправлено), но официального решения в Ant-Design-Vue-1.x до сих пор нет. На данный момент есть два варианта

• использоватьwebpack-ant-icon-loader(Асинхронно нагрузка)
• перенаправить в локальный файл для управления (рекомендуется), использование псевдонима@ant-design/icons/lib/distуказывает на проектantd-icon.js, затем вantd-iconЭкспорт по запросу

// alias配置
resolve: {
  alias: {
    '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons/antd-icon.js')
  }
}
// src/icons/antd-icon.js
export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline'

1. Обратите внимание, что ICON, используемый в проекте, и компонент Ant должны быть экспортированы.
2. Оптимизировано с 530K+ до 30K+

Эти два пакета имеют размер 300 КБ + 160 КБ, что в сумме дает 460 КБ, что также является относительно большим элементом.

Не упаковывать файлы часового пояса момента

Это можно сделать с помощью встроенного IgnorePlugin.

// webpack plugins
plugins: [
  // Ignore all locale files of moment.js
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],

удалить момент-часовой пояс

Moment-timezone содержит Moment. Только одно место в проекте используется для получения текущего времени в районе Dongba, Moment доступен, нет необходимости вводить MOMENT-TIMEZONE

// old
moment.tz('Asia/Shanghai').format('YYYYMMDDHHmmss')
// new
moment.utcOffset(480).format('YYYYMMDDHHmmss')

Используйте Dayjs вместо MOMENT

dayjs реализует большинство функций moment, API в принципе тот же, а сжатый объем меньше 2к, отличная альтернатива, и в большинстве случаев dayjs вполне может заменить moment (вводить плагины по мере необходимости)

Но вот вторая яма использования Ant-Design.Ant-Design использует момент при реализации Date-Picker, поэтому он не работает, если вы не используете момент в проекте, он будет упакован точно так же.. ..

Эта проблема была решена в версии Ant-Design для React, что позволило пользователям выбирать dayjs или moment. Кроме того, Ant-Design-Vue до сих пор не догнал...

К счастью, автор dayjs предоставляет плагин, который может заменить момент Ant-Design-Vue на dayjs👍 Хотя в документе только сказано, что можно использовать Ant-Design-React, на самом деле в выдаче видно, что это относится и к antdV, но некоторые конфигурации необходимо скорректировать

использоватьantd-dayjs-webpack-plugin

// vue.config.js
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
configureWebpack: {
    ...
    plugins: [
      new AntdDayjsWebpackPlugin({ preset: 'antdv3', replaceMoment: true })
    ],
}

Параметр replaceMoment должен использовать псевдоним веб-пакета для перенаправления moment на dayjs.Поскольку moment используется во многих местах проекта, таким образом вы можете продолжать использовать dayjs, фактически вызываемый моментом, чтобы добиться незаметной замены👍

1. После замены на dayjs некоторые функции необходимо поддерживать согласованность путем внедрения плагинов, таких как utc, updateLocale
2. После замены на dayjs некоторые оптимизации на данный момент необходимо изменить на dayjs или удалить.

core-js на самом деле является полифиллом для нового API браузера.Проект находится на стороне ПК, поэтому в основном для совместимости с IE...

Настройте .browserslistrc

• Укажите, что проекту нужна совместимая версия, и позвольте babel и auto-prefix выполнять меньше работы по совместимости, например, мобильный терминал не должен быть совместим с IE, iOS6.0 и ниже и т. д.

Отрегулируйте usebuiltins.

По умолчанию в проектеuseBuiltIns: 'entry'Были введены все полифиллы, что привело к относительно большому пакету. мы можем использоватьuseBuiltIns: 'entry'Корректируйте стратегию и внедряйте ее по мере необходимости, API, который не используется в проекте, не будет полифиллен.

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'usage', // entry，usage
        'corejs': 3
      }
    ]
  ],
  plugins
}

Кстати, лучший подход здесь должен состоять в том, чтобы использовать динамический полифилл и позволить серверу определять, следует ли возвращать полифилл в соответствии с UA.

до: 4,96 млн после: 2,96 млн

Оптимизация vue-cli3 по умолчанию заключается в том, чтобы поместить все зависимости npm в chunk-vendor, но этот подход приводит к тому, что chunk-vendor слишком велик, когда есть много зависимостей.

optimization: isProd ? {
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity, // 默认为3，调整为允许无限入口资源
    minSize: 20000, // 20K以下的依赖不做拆分
    cacheGroups: {
      vendors: {
        // 拆分依赖，避免单文件过大拖慢页面展示
        // 得益于HTTP2多路复用，不用太担心资源请求太多的问题
        name(module) {
          // 拆包
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
          // 进一步将Ant组件拆分出来,请根据情况来
          // const packageName = module.context.match(/[\\/]node_modules[\\/](?:ant-design-vue[\\/]es[\\/])?(.*?)([\\/]|$)/)[1]
          return `npm.${packageName.replace('@', '')}` // 部分服务器不允许URL带@
        },
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: 'initial'
      }
    }
  },
  runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }
} : {}

1. Советы: vue inspect > output.js --mode production Вы можете просмотреть окончательную конфигурацию
2. С субподрядом нужно иметь дело в соответствии с реальной ситуацией, чтобы достичь лучших результатов.Короче говоря, читайте больше документов и пробуйте больше.

Очень важным методом ускорения в SPA является маршрутизация ленивой загрузки.При открытии страницы загружается соответствующий файл.Мы используем асинхронные компоненты Vue и разбиение кода webpack(import()) может легко реализовать ленивую загрузку.

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

{
    path: 'register',
    name: 'register',
    component: () => import(/* webpackChunkName: "user" */ '@/views/user/register'),
}

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

Http2 - вторая версия HTTP-протокола, который быстрее, нижняя задержка и более функциональная, чем http1. На данный моментсовместимостьЭто также прилично с точки зрения покрытия, более 50% охвата в Китае.

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

Если веб-сайт поддерживает HTTPS, включите HTTP2 одновременно. Стоимость низкая, а преимущества высоки. Это значительно улучшено для страниц с большим количеством запросов, особенно при низкой скорости сети.

Nginx включает HTTP2 (> V1.95)

• Настройте конфигурацию Nginx

// nginx.conf
listen 443 http2;

• Перезапустите Nginx.

nginx -s stop && nginx

• Проверьте эффект

Мультиплексирование позволяет избежать ограничения одновременного использования ресурсов, но слишком большое количество ресурсов также приведет к снижению производительности браузера (межпроцессное взаимодействие Chrome связано с количеством ресурсов).

Сжатие Gzip — это мощный метод сжатия, который обычно уменьшает размер текстовых файлов на 2/3.

Поля заголовка, используемые в протоколе HTTPAccept-Encodingа такжеContent-Encoding"Какой формат кодирования используется для передачи тела" был согласован, и заголовок запросаAccept-EncodingПеречислены форматы кодирования, поддерживаемые клиентом. когда заголовок ответа Content-EncodingКогда указан gzip, браузер будет соответствующим образом распаковывать

Большинство браузеров поддерживают gzip, поэтомуAccept-Encodingтакже автоматическиgzip, поэтому нам нужно сделать сервер ресурсов вContent-EncodingУкажите gzip и верните файл gzip.

Nginx настроить Gzip

#开启和关闭gzip模式
gzip on;
#gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
# nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

Создание файлов gzip во время сборки

Хотя Nginx будет сжимать и возвращать Gzip при ответе на запрос после вышеуказанной конфигурации, сама операция сжатия будет занимать ЦП и время сервера.Чем выше уровень сжатия, тем больше накладные расходы, поэтому мы обычно загружаем файлы gzip вместе. сервер возвращает сжатый файл напрямую

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')
// gzip压缩处理
chainWebpack: (config) => {
    if(isProd) {
        config.plugin('compression-webpack-plugin')
            .use(new CompressionPlugin({
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false // 不删除源文件
            }))
    }
}

1. Уровень сжатия плагина по умолчанию — 9, максимальное сжатие
2. Не рекомендуется использовать сжатие gzip для файлов изображений, эффект плохой

Два необязательных значения для атрибута rel тега .
Prefetch, Предварительный запрос указывает браузеру, что пользователю может потребоваться загрузить целевой ресурс при просмотре в будущем, чтобы браузер мог оптимизировать взаимодействие с пользователем путем получения и кэширования соответствующего ресурса заранее.
Preload, preload, указывающий, что пользователю, скорее всего, потребуется загрузить целевой ресурс в текущем браузере, поэтому браузер должен предварительно выбрать и кэшировать соответствующий ресурс.

Предварительная выборка и предварительная загрузка могут эффективно оптимизировать взаимодействие с пользователем в некоторых сценариях. дать несколько сцен

• Загружаются первые экранные шрифты и большие изображения.Шрифты, введенные в CSS, перед загрузкой должны дождаться парсинга CSS.До этого браузер будет использовать шрифт по умолчанию, а при его загрузке он будет заменен на пользовательский шрифт, в результате чего字体样式闪动, а мы используемPreloadЭто намного лучше, когда шрифты загружаются заранее, и то же самое верно для больших изображений.
• Загружается фоновое изображение купона. Точно так же URL-ссылка в CSS не будет загружать изображение до того, как DOM будет смонтирован. При входе на страницу пакета карты / кассу вы можете использовать Prefetch, чтобы загрузить его заранее, чтобы пользователи могли немедленно просмотреть страницу купона. к загруженному изображению

По умолчанию Vue-Cli3 будет использовать плагин preload-webpack-plugin для предварительной загрузки и предварительной выборки ресурсов фрагмента, предварительной загрузки файла записи и предварительной выборки фрагмента маршрутизации.

Вообще говоря, никакого специального лечения не требуется.vue.config.jsможно настроить в

1. Теоретически предварительная выборка не повлияет на скорость загрузки, но в реальном тесте есть небольшое влияние, но это вопрос личного мнения.Я думаю, что общее впечатление все же улучшилось.
2. Рекомендуется использовать предварительную загрузку для ключевых ресурсов в верхней части страницы, таких как файлы шрифтов, скрытые в сценариях и стилях.
3. Внимание при доступе к трафику мобильного терминала

При работе с некоторыми слабыми участками сети OSS + CDN, несомненно, является очень мощным средством ускорения.

OSS, объектное хранилище

Массивные, безопасные, недорогие и высоконадежные облачные хранилища. Вы можете загружать и скачивать данные в любое время и в любом месте через простой интерфейс REST, а также можете использовать веб-страницы для управления данными.

Особенности ОСС:

• Стабильная, высокая доступность услуг, несколько резервных копий для обеспечения безопасности данных
• Безопасность, многоуровневая защита, защита от DDoS
• Крупномасштабный, высокопроизводительный, простой в использовании с высокой степенью параллелизма

Кроме того, OSS также предоставляет некоторые удобные услуги

• Обработка изображений, поддержка сжатия, обрезки, водяных знаков, преобразования формата и т. д.
• Ускорение передачи, оптимизация каналов передачи и стратегий протоколов для достижения высокой скорости передачи

Рекомендуется приобретать OSS напрямую у Alijia.Хотя OSS также имеет услуги ускорения передачи, ускорение CDN по-прежнему требуется для сценариев ускорения загрузки статических горячих файлов.

CDN, сеть доставки контента

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

Поскольку заявки на ресурсы не поступало, проект не ушел в OSS+CDN. Но если есть условия, рекомендуется многое улучшить.

Оптимизация первого экрана позволяет пользователям увидеть анимацию загрузки до того, как JS будет проанализирован и выполнен, что снижает беспокойство, связанное с ожиданием. Обычно простая анимация CSS записывается в index.html до тех пор, пока содержимое смонтированного узла не будет заменено после монтирования Vue. Однако эта практика также приведет к короткому белому экрану. Рекомендуется вручную управлять закрытием анимации CSS.

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

Вообще говоря, есть два способа загрузки изображений: один — сканирование сверху вниз, другой — размытое отображение исходного изображения, а затем постепенная загрузка, чтобы оно стало четким. У первого плохой пользовательский опыт, когда скорость сети низкая, а у второго плохой пользовательский опыт.Прогрессивная/ступенчатая загрузкаЭто может уменьшить тревогу пользователя в ожидании и улучшить его работу.

изображения в прогрессивном/чересстрочном формате

Сам браузер поддерживает метод сканирования и загрузки такого изображения от размытого до четкого, и вам нужно только обработать ресурсы.

• Генерация пользовательского интерфейса, экспорт PS выберите «Непрерывный», экспорт эскиза выберите «Прогрессивный / чересстрочный».
• Преобразование, выполненное с использованием сторонней библиотеки

постепенно загружать изображения

Сначала загрузите маленькое изображение, размойте рендеринг и замените исходное изображение после загрузки изображения.Наиболее типичный пример — средний.Размытие может быть обработано фильтром или холстом.

Загрузить заполнитель

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

1. Несколько методов можно использовать вместе
2. Изображения в прогрессивном/чересстрочном формате будут занимать определенное количество ресурсов ЦП и памяти, используйте их по назначению.

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