Краткое изложение практики оптимизации упаковки веб-пакетов проекта Vue

Webpack
Краткое изложение практики оптимизации упаковки веб-пакетов проекта Vue

В последнее время у меня была головная боль по поводу упаковки проекта Vue.Посмотрев жестко написанный проект, пользовательский опыт его упаковки в Интернете очень плохой, и это действительно смущает. Позже я познакомился с некоторыми методами оптимизации упаковки.Сейчас подведу итоги разработки.Этот стек технологийvue+element-ui+axios+echarts, Использование веб-пакета для упаковки и сборки инструментов является только заметкой об опыте. Если в статье есть какие-либо недостатки, пожалуйста, дайте мне несколько указателей. Я исправлю это как можно скорее, спасибо!

содержание

  • Маршруты загружаются асинхронно
  • оптимизация компонента элемента
  • Оптимизация конфигурации WebPack
  • Статистический анализ зависимостей проекта
  • Эффект оптимизации

Маршруты загружаются асинхронно

Страница проекта Vue представляет собой виртуальный маршрут, а доступ к содержимому страницы осуществляется по ссылке маршрутизации, настроенной vue-router.Разработка одностраничных приложений SPA подходит для разработки фоновых систем, но не является дружественной для поисковых систем, поскольку в конце генерируется только одна страница.

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

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

Ниже я поделюсь методом асинхронной ленивой загрузки роутинга в vue.Рекомендуется, если компонентов не много, этот метод не использовать, что увеличит время и скорость загрузки.Этот метод можно использовать для проектов со многими компонентами.

Импортировано по умолчанию es6

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

import example from '../components/example.vue'

Официальная рекомендация Vue

Используйте импорт, чтобы разделить компоненты на небольшие отдельные файлы, чтобы уменьшить размер файла. WebpackChunkName — это упакованное имя этого компонента/подкомпонента.

const example = () => import(/* webpackChunkName: "group-example" */ '../components/example.vue')

требуемый метод

Ниже приведен мой любимый метод require, который также может делить компоненты на мелкие части.

const example = resolve => require(['../components/example.vue'], resolve);

оптимизация компонента элемента

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

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

глобальное использование

  • Глобальное введение и использование
import elementUI from 'element-ui'
Vue.use(elementUI)

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

Ниже приведен демонстрационный код: Обычно формы и таблицы используются чаще.

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

// 按需引入
import {
  Form,
  Button,
  Table,
} from 'element-ui'

// 按需使用
Vue.use(Form)
Vue.use(Button)
Vue.use(Table)

Также есть некоторые компоненты для загрузки и подсказок сообщений, которые написаны следующим образом:

// 按需引入
import {
  Loading,
  Message,
  MessageBox,
  Notification,
} from 'element-ui'

// 按需使用
Vue.use(Loading.directive)
// 挂载到vue实例上面
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification,

Вы можете использовать компонент уведомления, вы также можете назвать его так,Notification(options),илиNotification.success(options).

оптимизация конфигурации веб-пакета

Оптимизация размера пакета зависимостей

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

Упражнение по настройке внешних параметров

В официальной документации webpack есть конфигурация для обработки различных пакетов, оптимизированных для зависимостей.[внешнее внешнее расширение].

Как использовать: В этом случае преобладает jQuery.

  • Введите cdn, вindex.htmlизheadнаписано на этикетке.
<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
  • Измените файл конфигурации веб-пакетаwebpack.config.js

Свойство — это имя, которое вы ввели в проект, а значение после него — это имя метода, предоставляемого jQuery.

externals: {
  jquery: 'jQuery'
}
  • последнее использование
import $ from 'jquery';
$('.my-elem').animate(/*some things*/);

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

Внешняя конфигурация реального боя

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

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>
  • в конфигурационном файле вебпакаwebpack.base.conf.jsсерединаentryДобавьте следующий абзац после атрибута:

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

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'element-ui': 'elementUI',
  'axios': 'axios',
}

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

Сжатие Gzip и оптимизация sourceMap

Это также метод сжатия файлов, для nginx онлайн-сервера лучше также включить функцию gzip, отмена карты ресурсов может эффективно защитить исходный код.

В файле сборки веб-пакета включите сжатие Gzip и отключите карты ресурсов.

module.exports = {
  // ...
  build: {
    productionSourceMap: false,
    productionGzip: true,
  }
}

Таким образом, файлов sourceMap после упаковки больше не будет, а будет еще несколько.js.gzрасширение файла.

Статистический анализ зависимостей проекта

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

конфигурация веб-пакета

  • Скачать пакеты зависимостей

webpack-bundle-size-analyzer

npm i -D webpack-bundle-size-analyzer
  • импорт конфигурации

Два способа представить

// commondjs方法
var WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
// es6方法
import { WebpackBundleSizeAnalyzerPlugin } from 'webpack-bundle-size-analyzer';

Добавьте в раздел plugin файла конфигурации webpack:

module.exports = {
  // ...
  plugins: [
    new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt')
  ]
  // ...
}

Использование приведенной выше конфигурации приводит к следующему:

<webpack-output-path>/reports/plain-report.txt:

marked: 27.53 KB (14.9%)
lru-cache: 6.29 KB (3.40%)
style-loader: 717 B (0.379%)
<self>: 150.33 KB (81.3%)

конфигурация скаффолдинга vue-cli

Поскольку vue-cli интегрировал этот плагин, его можно использовать, загрузив плагин и, наконец, выполнив командуnpm run build --reportЕго можно посмотреть после упаковки, и он автоматически отобразится вhttp://localhost:8888Открыть.

Эффект оптимизации

Наконец, взгляните на оптимизированный эффект:

Сравнение времени упаковки

Перед упаковкой:

时间

После упаковки:

时间

Сравнение объема упаковки

Перед упаковкой:

体积

После упаковки:

体积

Сравнение скорости открытия веб-страниц

Перед упаковкой:

速度

После упаковки:

速度

Диаграмма анализа пакета зависимостей

Перед упаковкой:

分析

После упаковки:

分析

напиши в конце

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

Категории