Мини-практика оптимизации программ

внешний интерфейс JavaScript Gulp

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

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

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

Другими словами, если мы хотим ускорить скорость рендеринга первого экрана, мы должны строго контролировать размер первого пакета загрузки. Как управлять размером пакета можно управлять из следующих двух аспектов:

  1. Загрузка подпакета
  2. Архив

После различных обработок получаем следующий результат

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

Поместите страницы, на которые пользователи могут щелкнуть при первом входе, в основной пакет, а остальные — в подпакеты. следующий каталог

├─pages          小程序主包页
  ├─……                  
├─subPages       子包内容
  ├─……

Затем мы подпаковываем и настраиваем основной пакет и подпакет в app.json.

{
    "pages": [
        "pages/index/index"
    ],
    "subPackages": [
        {
            "root": "subPages",
            "pages": [
                "pages/fenbao/fenbao"
            ]
        }
    ]
}

Закончено. Но когда подпакет будет загружен?

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

{
    "preloadRule": {
        "pages/index/index": {
            "network": "all",
            "packages": [
                "subPages"
            ]
        }
    }
}

Вышеупомянутое означает, что когда я перехожу на страницу Pages / Index / Index, я начинаю предварительно загрузить содержимое подпунктов подпункта. Таким образом, при входе в субподряд, восприятие не очень очевидно.

Однако здесь начинается яма.В начале используется следующий каталог.Мы напрямую используем указанный ниже каталог для запуска апплета и загрузки предварительного просмотра.

├─pages            小程序主包页
  ├─……                  
├─subPages         子包内容
  ├─……          
├─app.js           入口文件
├─app.json         配置文件
├─app.css          主 CSS 文件
├─config 	   gulp 配置文件
├─gulpfile.js      gulp 文件

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

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

├─src                 源码    // 重点关注这里
  ├─pages             小程序页面
    ├─....
  ├─subPages          子包内容
    ├─....
  ├─app.js            入口文件
  ├─app.json          配置文件
  ├─app.css           主 CSS 文件...
├─gulpfile.js         gulp 文件  // 重点关注这里
├─config              gulp 配置文件  // 重点关注这里

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

Очень просто, используйте gulp для выполнения волны операций, самое главное — сжать волну картинок, удалить релевантные комментарии и т.д. Код относительно прост

gulp.src('./src/**/*.wxml').pipe(stripComments()).pipe(gulp.dest(distPath))
gulp.src('./src/**/*{.png,.jpg,.gif,.svg}').pipe(imagemin({ progressive: true })).pipe(gulp.dest(distPath))

Что касается третьей картинки, кеша интерфейса и т.д., то в интернете много информации, так что не буду тут грубить~

@Author: beidan

Категории