В 2021 году вите можно запустить в производство? Степпинг конфигурации vite.config.js

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

В проекте компании используется vue, и есть два скаффолда для vue, vue-cli и vite. Таким образом, обсуждение того, можно ли запустить vite в производство, зависит от того, можно ли сравнить эффект vite после разработки и упаковки с vue-cli.

среда разработки

скорость запуска

Во-первых, это скорость запуска, Vite гордится тем, что она не упакована в среду разработки. Тогда по сравнению с vue-cli, упакованным в среду разработки, эта скорость должна быть совершенно взрывной.

Конфигурация упаковки

Основные элементы конфигурации см. в статье деревенского вождя Яна:
Статья первая:Подготовка к 2021 году: Vite Инженерная практика, рекомендуемая коллекция
Статья вторая:Подготовка к 2021 году: лучшие практики проекта Vite2

Небольшое упоминание о конфигурации псевдонимов, теперь изменено на это:

import { resolve } from 'path'

export default defineConfig({
    resolve:{
        alias:{
            src: resolve(__dirname, 'src')
        }
    }
})

Пакуйте и выходите в интернет

Это довольно круто, чтобы развиваться полностью, особенно скорость обновления.По сравнению с предыдущей перезагрузкой vue-cli более 20 секунд каждый раз при изменении файла, опыт vite действительно очень хорош.
Затем упаковка столкнулась с большим количеством ям. . .

Проблема скорости упаковки

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

brotliSize: false

Проблема со ссылкой на путь к ресурсу изображения

Но я обнаружил другую проблему. Мой путь к изображению находится в строке. После того, как vue упакован, он по-прежнему отображается как строка. Это несовместимо с только что настроенным путем img, и изображение не может быть импортировано.

image.png

image.png

Импортировать один за другим чрезвычайно обременительно.

Проблема с картинкой решена: нажмите →Решить проблему, из-за которой vite использует псевдоним для представления изображений, которые не отображаются.

Проблема тряски деревьев

Я обнаружил, что vite использует метод встряхивания дерева, то есть неиспользуемые ресурсы не упаковываются. Значит ли это, что при импорте других библиотек компонентов, таких как Element UI, больше не нужно импортировать по требованию?
Однако после тестирования было обнаружено, что применительно к библиотеке компонентов пользовательского интерфейса не использовалось встряхивание дерева, а все, что было импортировано, было запаковано. И есть небольшая проблема в этой области, использование назначения деструктурирования для загрузки по требованию или для импорта всего. Чтобы импортировать по запросу, вы можете обратиться к моей другой конфигурации статьи:Наггетс.Талант/пост/699213…

gzip-сжатие

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
    plugins:[
        ...,
        viteCompression({
            //生成压缩包gz
            verbose: true,
            disable: false,
            threshold: 10240,
            algorithm: 'gzip',
            ext: '.gz',
        }),
    ]
})

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

плагин vite-плагинов

Для других плагинов vite вы можете обратиться сюда:Сводка конфигурации Vite 2.0

Общая конфигурация

Наконец, позвольте мне привести конфигурацию моего vite для справки:vite конфигурация

Сводка опыта

На данный момент проект vite запущен отлично.
С точки зрения опыта разработки, vite лучше, чем vue-cli. А после добавления некоторых элементов конфигурации эффект упаковки можно сравнить с vue-cli. В настоящее время экология витэ все еще улучшается, и я чувствую, что он готов к производству.

Категории