Увеличьте скорость загрузки на 90% - оптимизация производительности первого экрана под vuecli

оптимизация производительности

предисловие

использовался раньшеvuecliЯ сделал блог, который представляет собой одностраничный проект с примерно десятью маршрутами. непосредственныйnpm run buildупаковать его, есть1Mогромныйjsдокумент

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

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

В процессе я также изменил проект сvuecli 2.xмигрировал вvuecli 3, поэтому далее будут представлены некоторые сходства и различия в оптимизации

анализировать

vuecli 2.xПоставляется с инструментами анализа просто бегиnpm run build --report

еслиvuecli 3Если это так, сначала установите плагин

cnpm install webpack-bundle-analyzer –save-dev

затем вvue.config.jsсредняя параwebpackнастроить

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }

бежать сноваnpm run build --report

В браузере откроется карта упаковки проекта, что удобно для интуитивного сравнения каждогоbundleразмер файла

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

Кроме того, в браузере также можно пройтиconvergeчтобы увидеть использование кода

Красный — загруженная, но неиспользуемая часть

Отложенная загрузка маршрута

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

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

существуетrouter.jsВ файле исходный метод статической ссылки

import ShowBlogs from '@/components/ShowBlogs'

routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]

изменить на

 routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')

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

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

если вvuecli 3, нам еще нужно сделать еще один шаг потому чтоvuecli 3Включено по умолчаниюprefetch(предварительная загрузка модулей), чтобы заранее получать контент, к которому пользователи могут получить доступ в будущем. На первом экране эти более десятка файлов маршрутизации будут загружены за один раз. Итак, мы собираемся отключить эту функцию вvue.config.jsустановить в Обратитесь к официальному сайту для практики:

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

element-ui загружается по запросу

Пакеты зависимостей загружаются выше сгиба, гдеelement-uiзанял весь568kИсходный метод импорта импортировал весь пакет:

import ElementUI from 'element-ui'
Vue.use(ElementUI)

Но на самом деле единственными компонентами, которые я использую, являются кнопки, нумерация страниц, формы, ввод и предупреждения. поэтому мы хотимЦитирование по запросу:

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
Vue.prototype.$alert = MessageBox.alert

УведомлениеMessageBoxРазница между методами регистрации, и хотя мы использовалиalert, Но вводить не надоAlertкомпоненты

существует.babelrcфайл добавлен(vue-cli 3установить первымbabel-plugin-component): плагины: [ [ "компонент", { "имя_библиотеки": "элемент-пользовательский интерфейс", "styleLibraryName": "тема-мел" } ] ]

element-uiГораздо меньше, но видно, что бросается в глазаtable.jsПодумав,tableКомпонент используется только страницей управления фоном, и его не нужно регистрировать глобально, поэтому мы его удаляем.main.jsсерединаTableа такжеTablColumnи зарегистрировать его локально в фоновом компоненте

import { Table, TableColumn } from "element-ui";

components: {
    "el-table": Table,
    "el-table-column": TableColumn },

tableразбит на файлы маршрутизации

Компоненты упакованы многократно

Как вы можете видеть выше, есть ссылки на два файла маршрутизации.codemirror.jsвызывать повторные загрузки мы можемwebpackизconfigфайл, изменитьCommonsChunkPluginКонфигурация

minChunks: 3

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

Домашняя страница загружена желтыми и серыми разделами После долгого демонтажа он вернулся к исходной точке

Конечно, мы можем продолжать бросатьCommonsChunkPluginконфиг исправить это но в новой версииwebpackсередина,CommonsChunkPluginбольше свободы, больше возможностейSplitChunksPluginзаменять

Вот почему я переношу проект наvuecli 3(использоватьwebpack4) Он оптимизирован по умолчанию, и на главной странице будет загружаться только серая часть (235K)

gzip

После распаковки используемgzipсделай компрессию Установитьcompression-webpack-plugin

cnmp i compression-webpack-plugin -D

существуетvue.congig.jsВведены и изменены вwebpackнастроить

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

можно увидеть200kВышеупомянутые файлы сжаты в100kв пределах

Нам также необходимо соответствующим образом настроить сервер Если браузер, отправляющий запрос, поддерживаетgzip, отправьте егоgzipформатировать файл мой сервер используетexpressкаркас построен Просто установите егоcompressionготов использовать

const compression = require('compression')
app.use(compression())

Обратите внимание, что последнее предложение должно быть помещено перед всеми другими регистрациями промежуточного программного обеспечения.

окончательный эффект

Первый экран загружает 198к ресурсов, а время загрузки 1с.На 90% быстрее оригинала

Постскриптум: стоит ли разбивать css

vuecli 3а такжеvuecli2.xЕще одно отличиеvuecli 3будет включен по умолчаниюcssотдельный плагинExtractTextPluginкаждого модуляcssФайлы будут разделены, целых 13cssфайл, а наша домашняя страница запросила 4, что заняло много времени запроса ресурсов мы можемvue.config.jsзакрыть его в

    css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: false,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
},

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

Суммировать

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

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

Справочная статья

Категории