Webpack + Vue, несколько способов уменьшить размер пакета при развертывании

внешний интерфейс CDN Vue.js Webpack

Как фреймворк, который начинался как SPA, кривая обучения разработке Vue относительно плоская, и, условно говоря, опыт разработки превосходен. Но многие новички обнаружат, что их собственный сайт, только упакованных файлов будет иметь 10M! Невероятно, но это никак не связано с производительностью Vue, мы можем значительно улучшить эту ситуацию с помощью файлов конфигурации.

Методы уменьшения размера файла после упаковки:

  1. используя ленивую загрузку
  2. Включить сжатие Gzip
  3. Повесьте библиотеку зависимостей на CDN
  4. Уменьшите ненужные зависимости библиотек

Подготовить знания:

  1. Как создать приложение Vue с помощью vue-cli и иметь определенное представление о нем, в противном случае, пожалуйста, переместитеОфициальный сайт
  2. Обладая знаниями о Webpack, я знаю, что это упакованный инструмент и его четыре элемента: сущность, вывод,. Дальнейшее понимание веб-пакета, места проведенияздесь

ленивая загрузка

Объяснение ленивой загрузки на официальном сайте выглядит следующим образом:

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

Сочетая асинхронные компоненты Vue и функцию разделения кода Webpack, легко реализовать ленивую загрузку компонентов маршрутизации.

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

Как добиться?

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

before:

import Article from '@/components/Article'

after:

const Article = () => import('@/components/Article')

Каков принцип?

По сути, он использует обещания, см.:Асинхронные компоненты

Включить сжатие Gzip

Vue не включает сжатие Gzip по умолчанию, но мы знаем, что размер сжатого файла будет значительно уменьшен, что подходит для онлайн-развертывания. Как включить тоже просто: Первый вconfigгенерал-лейтенантbuild.productionGzipУстановить какtrueЗатем подтвердитеwebpack.prod.conf.jsЕсть следующий код:

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

Если это так, просто используйте следующееnpm install --save-dev compression-webpack-pluginУстановите плагин webpack, чтобы при сборке проекта webpack сжимал файлы за вас. Если нет, вам просто нужно скопировать приведенный выше код в файл конфигурации веб-пакета.pluginsвниз. Как проверить размер файла после сборки? Мы можем использовать другой плагин webpack:webpack-bundle-analyzer, как это использовать? По умолчанию Vue импортирует этот плагин, нам просто нужно его вызвать:package.jsonФайл, добавьте следующую команду:"analyzer": "NODE_ENV=production npm_config_report=true npm run build",бегатьnpm run analyzer, подождите некоторое время, вы можете увидеть упаковку всего проекта.

Повесьте библиотеку зависимостей на CDN

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

Возьмите элемент в качестве примера:

Сначала импортируем библиотеку в html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo-vue-project</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.8/theme-chalk/index.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
  </body>
</html>

затем вwebpack.base.conf.jsУдалите зависимости от этих трех библиотек из:

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT'
  },

Так что мы можем с удовольствием пользоваться CDN.

Уменьшите ненужные зависимости библиотек

Это вопрос мнения. Если вы используете вышеупомянутыйwebpack-bundle-analyzer, вы обнаружите, что большинство ваших пакетов — это библиотеки, на которые вы ссылаетесь, например: Element-ui, lodash, highlight и т. д. Я не знаю, что вы чувствуете, когда видите это.В любом случае, я хочу удалить их и написать нужные мне функции.Ведь мне нужна только малая часть их функций, но я жертвую большим количеством пропускной способности!

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

Webpack — мощный инструмент для создания пакетов.Когда эта статья была написана в V3.4, а теперь вышла V4, файл конфигурации стал проще и достоин внимания! Статья написана коряво, если что-то не так, прошу покритиковать и поправить!

Ссылка на эту статью:

WebPack Vue на оптимизации упаковки

Оптимизация загрузки первого экрана Vue

Категории