В проекте Vue все файлы js и css, введенные в проект, будут упакованы в vendor.js при компиляции, и браузер может начать отображать первый экран после загрузки файла. Если импортировано много библиотек, размер файла vendor.js будет довольно большим, что повлияет на работу с первым экраном. Вы можете увидеть пример:
Это состояние загрузки страницы до оптимизации: выполнитьnpm run buildПосле упаковки проекта получается файл vendor.js, который представляет собой огромный файл размером более 1 М. Ни один пользователь не может выдержать загрузку более 5 с без закрытия страницы, как показано на рисунке:
Давайте сначала проанализируем причины низкой скорости загрузки интерфейса.
1. Сначала установите инструмент визуального анализа ресурсов для WebPack, выполнение из командной строки:npm i webpack-bundle-analyzer -D2. Затем в режиме разработки разработки разработки веб-папака введите плагин, код выглядит следующим образом:
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
plugins: [
new BundleAnalyzerPlugin()
]3. Последнее выполнение командной строкиnpm run build --report, браузер автоматически откроет результаты анализа следующим образом:
Целевой план оптимизации
1. Для третьих лицоптимизация библиотеки js, отдельная упаковка
Если производственная среда является интранет, поместите ресурсы на интранет и импортируйте их через статические файлы, которые будут намного быстрее, чем Node_Modules и внешняя упаковка и загрузка CDN. Если есть внешняя сеть, ее можно импортировать через CDN, потому что он не занимает пропускную способность для доступа к внешней сети, что может не только сохранить трафик, но и ускорить скорость доступа через CDN. Но будьте осторожны, если ресурсы CDN вы ссылаетесь на сторонний сервер, безопасность не совсем контролируется.
В настоящее время для загрузки используется файл js, который представляет производственную среду пакета зависимостей, а доступ к открытым глобальным переменным можно получить непосредственно через окно, а не через импорт, Vue.use для регистрации
В файле конфигурации разработки веб-пакета для разделения и упаковки сторонних пакетов ресурсов можно добавить следующие параметры: ключ — это имя зависимого пакета, а значение — глобальная переменная, полученная из исходного кода. Как показано на рисунке ниже, вы можете видеть, что пакеты ресурсов, связанные с vue, были исключены после упаковки. Для некоторых других библиотек инструментов попробуйте импортировать их по запросу.
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT'
}Соответствующие ресурсы загружаются только при доступе к текущей странице, а файлы загружаются в модули асинхронно.Имя файла по умолчанию — случайный идентификатор. Если в выходных данных настроено имя chunkFilename, вы можете добавить WebpackChunkName в компонент для облегчения отладки.При загрузке страницы будет отображаться соответствующее загруженное имя файла + хеш-значение, как показано ниже:
{
path: '/Login',
name: 'Login',
component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}3. Сжатие ресурсов изображений, используйте изображение Sprite для ресурсов значков.
Сжатие Gizp — это метод оптимизации HTTP-запросов, который повышает скорость загрузки за счет уменьшения размера файла. С его помощью можно сжимать файлы HTML, js, css и даже данные json, что позволяет уменьшить объем более чем на 60%. Внешний интерфейс настроен на сжатие gzip, а сервер использует nginx, чтобы включить gzip для уменьшения размера сетевого трафика передачи.
Выполнение командной строки:npm i compression-webpack-plugin -D
Добавьте следующий код в файл конфигурации разработки веб-пакета:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
new CompressionWebpackPlugin()
]После включения сжатия и упаковки gzip это станет следующим, и пакет gz будет сгенерирован автоматически. В настоящее время большинство основных браузеров поддерживают gzip. Даже если небольшое количество неосновных браузеров не поддерживает его, не беспокойтесь. Те, кто не поддерживает файлы формата gzip, по умолчанию будут иметь доступ к исходным файлам, поэтому не настраивайте для очистки исходных файлов.
Пять, оптимизация конфигурации, связанная с webpack
(1) Используйте подключаемый модуль uglifyjs-webpack-plugin вместо подключаемого модуля UglifyJsPlugin, который поставляется с веб-пакетом, для сжатия файлов JS; закройте сопоставление исходного кода в производственной среде, с одной стороны, это может уменьшить размер пакет кода, с другой стороны, это также способствует безопасности системного кода; информация отладчика; настройка SplitChunks для извлечения общедоступного кода и повышения производительности вашего приложения.
(2) Используйте плагин mini-xss-extract-plugin для извлечения CSS в отдельные файлы и используйте плагин оптимизации-css-assets-webpack-plugin для сжатия файлов CSS.
Примечание. Для конкретной конфигурации веб-пакета нажмитеnuggets.capable/post/684490…Ознакомьтесь с первой статьей о веб-пакете, комментарии очень подробные.
В-шестых, оптимизация уровня кода страницы интерфейса.
(1) Разумное использование v-if и v-show
(2) Разумное использование часов и вычислений
(3) При использовании v-for вы должны добавить ключ, предпочтительно уникальный идентификатор, избегать использования индекса и на одной метке v-for и v-if не должны использоваться одновременно.
(4) Разрушение таймера. Событие уничтожения может быть выполнено во время жизненного цикла beforeDestroy(); вы также можете использовать прослушиватель событий $once, чтобы очистить таймер в месте, где определено событие таймера. Подробности на официальном сайте vue.
Вывод. Оптимизация производительности внешнего интерфейса очень важна, и в будущем будут добавляться другие лучшие решения. Вы также можете оставить сообщение в области комментариев для обсуждения.Если есть какие-либо ошибки, вы можете указать.