приветствовать первых последователей

React.js Vite

Некоторое время назад я чистил Жиху и случайно увидел, что внимание особенно велико.Что нового в преддверии 2021 года?Написал ответ ниже:

Многие люди откажутся от webpack и начнут использовать vite.

Из любопытства я очень хорошо разбираюсь в программировании для GitHub.домашняя страница vite на GitHub. После прочтения ридми есть несколько мест, которые произвели на меня очень глубокое впечатление:

  • Next Generation Frontend Tooling
  • Instant Server Start
  • astonishingly fast Hot Module Replacement

Так что планирую попробовать написать демку на основе vite + локально реагировать на проверку товара, к счастью@vitejs/appСкаффолдинг также позволяет создавать такие проекты, как react и react-ts.В последнее время ts стал популярным, и react-ts будет реорганизован!

Леса для начала

первый шаг:@vitejs/appСкаффолдинг для создания проекта, установки зависимостей, запуска dev

$ npm init @vitejs/app my-react-vite-app --template react-ts
$ npm install
$ npm run dev

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

Optimizable dependencies detected:
react, react-dom
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies or config have changed)

  Vite dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://10.33.165.26:3000/
  > Network:  http://10.4.19.149:3000/

  ready in 2535ms

Время первого запуска dev составляет 2535 мс, что намного быстрее, чем проект, созданный с помощью шаблонов create-react-app, а время второго запуска сокращается до одной десятой времени первого запуска, потрясающе! Итак, какую магию использует Вите?

магия витэ

Подход Вите заключается в следующем:

  1. При первом запуске vite анализирует зависимости в проекте package.json и конвертирует пакеты с помощью модулей cjs и umd в модули esm.

  2. Чтобы уменьшить количество http-запросов и повысить производительность загрузки страниц, vite классифицирует каждую зависимость в esm-модуль (файл) отдельно.Например, зависимости package.json проекта выглядят следующим образом (немного похоже на windows и webpack dll)

    {
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

    Упакованный файл:react-dom.jsа такжеreact.js.

    Предположим, что в пакете много внутренних модулей, например:lodash-es имеет более 600 внутренних модулей, он будет генерироваться только после обработки vitelodash-es.jsС помощью этого файла vite будет кэшировать модуль предварительной сборки в текущем проекте.node_modules/.viteПод папкой время, затраченное на предварительную комплектацию, на самом деле является временем, затраченным на первый и второй этапы.

  3. Клиентский доступ: благодаря фактическому доступу к маршрутизации браузер загружает файл входа модуля esm в сценарий HTML.

    <script type="module" src="/src/main.tsx"></script>

    Браузер проанализирует файл записи и автоматически загрузит и кэширует его в проекте в соответствии с отношением импорта файла записи.node_modules/.viteИспользуются другие модули esm, зависящие от папки. Обновление страницы или HMR для запрошенного ресурса, сервер разработки вернет кеш 304 Not Modified и 200 OK (из кэша диска), полностью используя функции браузера для завершения предыдущего процесса поиска зависимостей и упаковки веб-пакета.

  4. Вторичный запуск: процесс предварительного объединения (этапы 1 и 2 выше) будет выполняться повторно только в случае возникновения любого из следующих четырех условий.

    • обновление списка зависимостей в package.json
    • Изменение файлов блокировки: package-lock.json, yarn.lock, pnpm-lock.yaml
    • Изменения в файле конфигурации vite.config.js
    • Папка node_modules/.vite не существует

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

в сочетании с

Почувствовав и испытав необычную вторичную скорость запуска vite, я хочу использовать antd в vite, чтобы реально использовать его в проекте:

Установите antd и react-router-dom

$ npm install antd react-router-dom -S

Создан в каталоге srclayouts/index.tsxФайл макета, напишите следующий код:

import React from "react";
import { Layout, Menu } from "antd";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "@/pages/index";
import About from "@/pages/About";
import Users from "@/pages/Users";
import styles from "./index.module.less";

const { Header, Content } = Layout;

export default function App() {
  return (
    <Router>
      <Layout className={styles.layout}>
        <Header>
          <div className={styles.logo} />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
            <Menu.Item key="/">
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key="/about">
              <Link to="/about">About</Link>
            </Menu.Item>
            <Menu.Item key="/users">
              <Link to="/users">Users</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content className={styles.content}>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/about" exact component={About} />
            <Route path="/users" exact component={Users} />
          </Switch>
        </Content>
      </Layout>
    </Router>
  );
}

Создайте файл стиля: index.module.less

.layout {
  min-height: 100vh;
  .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 16px 24px 16px 0;
    background: rgba(255, 255, 255, 0.3);
  }
  .content {
    min-height: 280px;
    margin: 24px;
    background: #fff;
  }
}

Консоль сообщает об ошибке и требует установки меньшего количества

21:50:31 [vite] Internal server error: Preprocessor dependency "less" not found. Did you install it?

Установите less (помните, потому что less не импортируется в код, поэтому поместите его в devDependencies)

$ npm install less -D

Добавьте три страницы «Домой», «О программе» и «Пользователи»,src/pages/index.tsx,src/pages/About/index.tsx,src/pages/Users/index.tsx:

import React from "react";

function Home() {
  return <h1>Home</h1>;
}

export default Home;
// 以此类推....

Консоль опять выдает ошибку, не могу найти@/pages/indexМодуль:

21:57:52 [vite] Internal server error: Failed to resolve import "@/pages/index". Does the file exist?

Поскольку я являюсь участником umi, я следовал привычке размещать @ в каталоге src, когда umi добавлял зависимости.

Измените tsconfig.json и добавьте следующие конфигурации baseUrl и path в компиляторOptions (эти две конфигурации отображаются парами), чтобы при импорте файлов с @ в коде мы могли напрямую находить и запрашивать файлы в папке src.

{
  "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
}

Конфигурация в tsconfig.json является лишь напоминанием: при реальном поиске файла, если псевдоним не настроен, все равно будет выдаваться сообщение об ошибке, поэтому дополнительно необходимо настроить vite. Открытьvite.config.ts, добавьте конфигурацию псевдонима:

import reactRefresh from '@vitejs/plugin-react-refresh'
import { defineConfig } from 'vite'
import path from "path";

export default defineConfig({
  alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  plugins: [reactRefresh()],
});

Обновите страницу и обнаружите, что стиль antd отсутствует.

Первый способ, полное внедрение файлов стилей (чего мы конечно не хотим)

import "antd/dist/antd.css"

Второй способ, если мы используем webpack, мы можем подумать об использованииbabel-plugin-importдля импорта файлов стилей antd по мере необходимости, но с vite мы можем использоватьvite-plugin-impдобиться такого же эффекта.

Установитьvite-plugin-imp

$ npm install vite-plugin-imp -D

настроитьvite.config.tsплагин

import reactRefresh from '@vitejs/plugin-react-refresh'
import { defineConfig } from 'vite'
import path from "path";
import vitePluginImp from "vite-plugin-imp";

export default defineConfig({
  alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/lib/${name}/style/index.css`,
        },
      ],
    }),
  ],
});

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

Поскольку базовый стиль antd не представлен, здесь я выбираюsrc/main.tsxПредставлен в:

import "antd/lib/style/index.css";

После того, как введение, наконец, сделано!

Как видно из рисунка, базовый стиль, макет, меню и наши пользовательские стили внедряются в структуру dom по мере необходимости.

Подводя итог, vite в сочетании с antd на самом деле сделал только следующее:

  • Вводить меньше зависимостей
  • настроить@/псевдоним
  • Внедрение и стили по запросу

Следующий шаг:

  • Образы для доступа к CDN
  • Используйте хуки/редукс/два

Ссылка на ссылку

  • Виртуальная документацияПохоже, что на данный момент есть только английская версия (а может быть, я ее не нашел), может быть, потому что код сейчас находится в стадии бета-тестирования 2.0 и нестабилен, частота обновлений англоязычных документов будет относительно высокой, поэтому пока нет версии перевода на другие языки.

Одно обновление: недавно я обнаружил, что все еще существует проблема с загрузкой по запросу: если вы импортируете только компонент таблицы, но сама таблица зависит от стилей baseStyle, button, empty, radio, checkbox, dropdown, spin, разбиение на страницы и всплывающую подсказку. Согласно приведенному выше коду, будет импортирован только стиль самой таблицы, а другие стили будут потеряны. Хотя baseStyle импортируется вручную, очень проблематично импортировать так много других стилей, поэтому не рекомендуется импортировать baseStyle вручную.

Категории