Практика оптимизации производительности фронтенда с 30 до 2 с

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

Внедрены внешние инструменты анализа производительности, такие как панель производительности, Lighthouse, PageSpeed Insights; также представлены инструменты анализа пакетов, такие как диаграмма веб-пакетов, анализатор пакетов веб-пакетов, визуализатор веб-пакетов и т. д.; проведена оптимизация проекта, например, внедрение Echarts по запросу, конфигурация сжатия Moment, внедрение ramda по запросу, ant design vue, значки ant design vue, Quasar и т. д., конфигурация сжатия gzip и т. д.

Введение в проект

Используется побочный проект управленияeasywebpack-vueОн построен с использованием рендеринга на стороне сервера, с использованиемquasarа такжеant design vueДве библиотеки компонентов

Основное введение в EasyWebpack:у-у-у. yuque.com/easy-team/ о…

Режим рендеринга активов:у-у-у. yuque.com/easy-team/ о…

Квазар:v0-16.quasarchs.com/

Муравей Дизайн Вью:ant DV.com/docs/v UE/in…

Инструмент анализа производительности

Панель производительности

Google Browser Performance Panel — очень мощный инструмент, который можно анализировать разными способами.

Lighthouse

Lighthouse — это инструмент автоматизации с открытым исходным кодом от Google, показывающий такие показатели производительности, как белый экран, первый экран, интерактивное время, SEO, PWA и т. д.

Есть два способа запустить Lighthouse: как расширение Chrome и как инструмент командной строки.

// 安装命令：
npm install -g lighthouse

// 审查某个网页：
lighthouse https://www.imooc.com/

// 帮助查看
lighthouse --help

 //导出HTML格式
lighthouse https://www.imooc.com/  --output html

PageSpeed Insights

сайт поиска:Developers.Google.com/speed/pages…

Аналитический документ:Developers.Google.com/speed/docs/…

Google Page Speed Insight (PSI) — это инструмент, предназначенный для оптимизации веб-страниц и увеличения скорости их загрузки на всех устройствах.

Анализ домашней страницы Taobao:

Введение в инструменты анализа пакетов

webpack chart

URL-адрес:AlexPants.GitHub.IO/Webpack — проверить…

Введение: Загрузитьstat.jsonфайл для создания общей схемы иерархии файлов проекта. Щелкните любую область, чтобы войти в анализ файла подкаталога.Этот инструмент может предоставить только общую структуру зависимостей файлов, которая представляет собой структуру, подобную круговой диаграмме.

webpack bundle analyzer

URL-адрес:webpack.github.io/analyse/

Введение: Загрузитьstat.jsonфайл, вы можете сгенерировать количество целых файлов проекта (включая файлы vue, js, css, изображения, фрагменты и т. д.), размер файла и статистику зависимостей файлов, которая может легко находить и отфильтровывать большие файлы js, изображения, css, а затем выполните целевую оптимизацию, информация очень полная, очень полезно оптимизировать размер файла.

webpack bundle optimize helper

URL-адрес:webpack.jakoblind.no/optimize/

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

webpack visualizer

URL-адрес:Крис Бейтман.GitHub.IO/Webpack-vis…

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

Строительство упаковки проекта

Инструменты анализа сборки: Analyzer(webpack-bundle-analyzer) и stats(stats-webpack-plugin) , по умолчанию используется плагин Analyzer.

простая установка

Если будет предложено“zsh: command not found: easy”, затем выполните следующую команду, установите ее глобально, вы можете использовать ее в командной строкеeasywebpack or easyкоманды, такие какeasy init, easy build, easy dev, easy printЖдать

$ sudo npm i easywebpack-cli  -g

Анализатор Анализ

Следующая команда упакует и создаст производственную среду, удалит вспомогательный код разработки, сожмет js/css/image и хэш. Два адреса будут открыты автоматически, и вы сможете просмотреть структуру, размер, зависимости и т. д. пакета

$ easy build prod -s

(1) Проанализируйте пакет vendor.js:http://127.0.0.1:9997/

(2) Проанализируйте файл записи [entry].js:http://127.0.0.1:9999/

Анализ статистики

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

$ easy build prod -s stats

использоватьwebpack analyseпроанализируйте, как показано ниже:

Оптимизация реального боя

Анализ перед оптимизацией

Ниже приведен анализ перед оптимизацией, видно, что:

Доля файлов поставщиков: момент > ramda > среда выполнения > vue-router > vuex
Соотношение файлов [entry].js: ant design vue > main.js > quasar > значки @ant design

webpack-bundle-analyzerАнализ модуля выглядит следующим образом:

(1)http://127.0.0.1:9997/

(2)http://127.0.0.1:9999/

webpack bundle optimize helperАнализ входного файла выглядит следующим образом:

Перед оптимизацией главная страницаlighthouseаналитический отчет:

Электронные карты представлены по запросу

Размер пакета входного файла减少 0.39MB，即 400KB.

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

// 引入各种图表，图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from "echarts/charts";

// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LegendComponent,
  AxisPointerComponent,
  DatasetComponent,
} from "echarts/components";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { SVGRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  BarChart,
  LineChart,
  PieChart,

  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LegendComponent,
  AxisPointerComponent,
  DatasetComponent,

  SVGRenderer,
]);

export default echarts;

Конфигурация сжатия моментов

Moment по умолчанию поддерживает несколько языков, но эта система использует только китайский язык, поэтому другие языки можно исключить. После использования следующей конфигурацииvendor 减少了约 200kb.

На самом деле сам Moment.js довольно большой, 232 КБ, который можно заменить Day.js, который весит всего 12 КБ.

dayjsзаменятьmoment.jsДокументация:GitHub.com/Анта-дизайн/…

// 修改webpack.config.js文件
plugins: [
  // 排除i18n其他语言，仅加载中文 `moment/locale/zn-cn.js`
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
];

Рамда импортируется по требованию

После импорта по требованию,vendor 减少了 92kb.

// 安装依赖
npm install babel-plugin-ramda --save

// 配置babel.config.js文件
module.exports = {
  plugins: [
    // "ramda",
    // 或者
    ["ramda", { "useES" : true }]
  ],
};

ant design vue вводится по запросу

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

Используйте ant design vue для импорта по запросу файла ввода减少了 0.65MB，即 666KB.

// 安装依赖
npm install babel-plugin-import --save-dev

// 配置webpack.config.js文件
module.exports = {
  plugins: [
    [
      "import",
      // 默认js路径是[libraryName]/[moduleType]/[componentName]
      // 默认css路径是[libraryName]/[moduleType]/[componentName]/style
      {
          // 引入库名称，默认是ant-design-vue
        libraryName: "@ui/ant-design-vue",
        // 来源目录，默认是“es”
        libraryDirectory: "",
        // style：css-识别css文件；tree-识别less文件
        style: true,
        // // 自定义组件路径
        // customName: (name) => {
        //   return `ant-design-vue/${name.toLowerCase()}`
        // }
        // // 自定义组件库样式
        // style: (name) => {
        //  // name为组件所在的路径，按需加载样式配置提取对应组件名称的css即可
        //   return `@/ant-design-vue/${name}/style`
        // },
      },
    ],
  ],
};

// 配置后的实现
import { Button } from "@ui/ant-design-vue"
// 等价于
import "@ui/ant-design-vue/button/style/index.less"
import Button from "@ui/ant-design-vue/button/index.js"

Значки Ant Design Vue введены по требованию

Библиотека иконок ant design vue icons также довольно велика, лишь некоторые из них используются в реальном проекте, и большинство из них используют свои собственные иконки, поэтому необходимо вводить библиотеку диаграмм по требованию. Однако эта рабочая нагрузка немного велика, и ее легко пропустить, если вам нужно ее контролировать.

Конфигурация на самом деле довольно проста, просто переименуйте путь загрузки библиотеки иконок ant design vue icons. удалить все значки, вы можете减少 0.47MB，即 480KB.

(1) Настройте файл webpack.config.js

module.exports = {
  alias: {
    "@ant-design/icons/lib/dist$": resolve("./utils/icons.js"),
  },
};

(2) Добавьте файл icon.js

export { default as CalendarOutline } from "@ant-design/icons/lib/outline/CalendarOutline";

export { default as SettingOutline } from "@ant-design/icons/lib/outline/SettingOutline";
export { default as GithubOutline } from "@ant-design/icons/lib/outline/GithubOutline";
export { default as CopyrightOutline } from "@ant-design/icons/lib/outline/CopyrightOutline";

Quasar представлен по запросу

Quasar представляет конфигурацию по запросу,入口文件减少了0.51MB，即522KB

Quasar в основном используется для построения внешних фреймворков, таких как левое меню и навигация по заголовку и т. д.; ant design vue используется для всей внутренней разработки страниц. Позже Quasar можно постепенно заменить, сократив интерфейсную структуру.

// 配置babel.config.js文件
module.exports = {
  plugins: [
    [
      "transform-imports",
      {
        quasar: {
          transform: require("quasar/dist/babel-transforms/imports.js"),
          preventFullImport: true,
        },
      },
    ],
  ],
};

Включите сжатие gzip (уменьшение на 75% напрямую)

Внешний интерфейс упакован и сжат с помощью webpack, grunt или gulp, которые в основном могут сжимать более 50%, а сервер может сжимать более 50%, открывая сжатие gzip на предыдущей основе, поэтому это действительно должно быть включено. .

经过 gzip 压缩，文件大小可以变为之前的 30%甚至更小.

В этой практике входной файл состоит из3.6MB 变为 1MB,减少了 72%, время также определяется30s 减为 2s左右охватывать

(1) Проверьте, включено ли у клиента сжатие gzip:Accept-Encodingдля определения поддержки сжатия.

(2) Проверьте сервер, чтобы включить сжатие gzip: в заголовке ответа http мы можем увидетьcontent-encoding:gzip

(3) Внешний интерфейс включает сжатие gzip следующим образом.Для взаимодействия с сервером сервер также должен быть настроен с помощью gzip:

// 配置webpack.config.js文件
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  plugins: [
    new CompressionPlugin({
      // filename: '[path].gz[query]', // 目标文件名
      algorithm: "gzip", // 使用gzip压缩
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$/, // 压缩文件类型
      threshold: 102400, // 对超过100k的数据压缩
      minRatio: 0.8, // 最小压缩比达到0.8时才会被压缩
    }),
  ],
};

конфигурация dll

dll официальный сайт конфигурации:у-у-у. yuque.com/easy-team/ о…

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

Если это общий проект, вам нужно настроить dll webpack самостоятельно, а easywebpack интегрирован внизу, нам нужно только настроить его следующим образом.

dll: извлеченный файл по умолчанию — vendor.js.

// webpack.config.js
module.exports = {
 dll: ["vue", "vuex", "vue-router", "axios", "js-cookie", "moment"],
}

Конфигурация splitChunks

Чтобы выполнить разумную сегментацию кода, уменьшите размер файла записи. Конфигурация по умолчанию создает только три файла js: runtime, common и [entry].js.

module.exports = {
  optimization: {
    namedModules: true,
    namedChunks: true,
    runtimeChunk: {
      name: "runtime",
    },
    splitChunks: {
      name: false,
      chunks: "all", // all(全部)， async(异步的模块)，initial(同步的模块)
      minSize: 20000, // 表示文件大于1k的时候才对它进行打包
      minChunks: 2, // 当某个模块满足minChunks引用次数时，才会被打包。
      maxAsyncRequests: 5, // 在打包某个模块的时候，最多分成5个chunk，多余的会合到最后一个chunk中
      maxInitialRequests: Infinity,
      automaticNameDelimiter: "~", // 当vendors或者default中的filename不填时，打包出来的文件名就会带~
      cacheGroups: {
        default: false,
        vendors: {
          // 将从node_modules中引入的模块统一打包到common.js文件中
          name: "common",
          chunks: "all",
          minChunks: 2,
          test: /[\\/]node_modules[\\/]/,
        },
        styles: {
          // css统一打包到common.css文件中
          name: "common",
          chunks: "all",
          minChunks: 2,
          test: /\.(css|less|scss|stylus)$/,
          enforce: true,
          priority: 50,
        },
      },
    },
  },
};

DNS Prefetch

DNS Prefetch(Предварительное разрешение DNS): в соответствии с правилами, определенными браузером, доменные имена, которые могут использоваться после разрешения, анализируются заранее, так что результаты разрешения кэшируются в системном кеше, что сокращает время разрешения DNS и повышает скорость доступа к сайту.

Автоматический анализ браузера: когда механизм браузера анализирует HTML-страницу, он автоматически получает доменное имя в атрибуте href всех тегов a текущей страницы, а затем выполняетDNS Prefetch. Этот процесс синтаксического анализа выполняется параллельно с просмотром пользователем веб-страницы. Но для обеспечения безопасности,在 HTTPS 页面中没有开启 DNS Prefetch.

<!-- 开启DNS Prefetch -->
<meta http-equiv="x-dns-prefetch-control" content="on" />

Асинхронные и отложенные шаблоны JS

Механизм JavaScript существует независимо от механизма рендеринга, который блокирует синтаксический анализ HTML и синтаксический анализ CSS, поэтому вы можете изменить метод загрузки JavaScript или время загрузки для оптимизации:

Попробуйте поместить файл js внизу тела
Используйте отсрочку и асинхронность, чтобы избежать ненужной блокировки

asyncРежим: асинхронная загрузка, не будет блокировать загрузку браузера и будет выполняться сразу после успешной загрузки. использовать несколькоasyncПорядок выполнения нескольких файлов, представленных шаблоном, не определен.

deferРежим: асинхронная загрузка, выполнение отложено. После анализа всего документа всеdeferЗагружен код файла js. Несколько файлов, введенных с использованием нескольких шаблонов отсрочки, выполняются последовательно сверху вниз.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script async src="m-es6-promise.min.js"></script>
    <script async src="m-polyfill-v5.3.js"></script>
  </head>
  <body>
    <script defer>
      /* 百度统计代码 */
      window._hmt = window._hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?{{hmtKey}}";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  </body>
</html>

Постоптимизационный анализ

Ниже приведен анализ перед оптимизацией, видно, что:

Доля файлов поставщиков: время выполнения > момент > vue-router > vuex > axios
Соотношение файлов [entry].js: main.js > ant design vue > значки @ant design > quasar

серия статей

Оптимизация изображения для оптимизации производительности интерфейса, сокращение ресурсов изображения на 57 %.
После борьбы с сегментацией кода для оптимизации производительности внешнего интерфейса пакет пакетов был уменьшен на 26%.
Сверхдетальный анализ реального боя Lighthouse, поэлементный анализ и оптимизация
Внешняя оптимизация производительности Сверхдетализация Сверхполная боевая работа