forked from nuxt/nuxt.com
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs) Перевод Nuxt 2 Static Improvements
- Loading branch information
Ivan Bochkarev
committed
Jul 2, 2024
1 parent
9bd106f
commit 1b03550
Showing
1 changed file
with
80 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,158 +1,161 @@ | ||
--- | ||
title: Nuxt 2 Static Improvements | ||
description: With Nuxt version 2.13, the full-static mode has been introduced. In addition, a new command nuxt export was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... until now. | ||
title: Улучшения статики Nuxt 2 | ||
description: С версии Nuxt 2.13 был представлен полностью статический режим. Кроме того, была добавлена новая команда nuxt export для предварительного рендеринга ваших страниц без запуска сборки webpack с целью разделить процесс рендеринга и сборки. Единственной проблемой было то, что большинство пользователей Nuxt не могли раскрыть весь потенциал разделения... пока что. | ||
image: /assets/blog/nuxt-static-improvements.png | ||
date: 2020-07-27 | ||
authors: | ||
- name: Alexander Lichter | ||
- name: Александр Лихтер | ||
avatarUrl: https://github.com/manniL.png | ||
link: https://twitter.com/TheAlexLichter | ||
twitter: TheAlexLichter | ||
- name: Sébastien Chopin | ||
- name: Себастьен Шопен | ||
avatarUrl: https://github.com/atinux.png | ||
link: https://twitter.com/atinux | ||
twitter: atinux | ||
- name: Pooya Parsa | ||
- name: Пуя Парса | ||
avatarUrl: https://github.com/pi0.png | ||
link: https://twitter.com/_pi0_ | ||
twitter: _pi0_ | ||
category: Релиз | ||
--- | ||
|
||
## Introduction | ||
## [](#introduction)Введение | ||
|
||
With Nuxt version 2.13, the [full-static mode](/blog/going-full-static) has been introduced. In addition, a new command `nuxt export` was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt users weren't able to unleash the full potential of the separation... **until now.** | ||
С версии Nuxt 2.13 был представлен [полностью статический режим](/blog/going-full-static). Кроме того, была добавлена новая команда `nuxt export` для предварительного рендеринга ваших страниц без запуска сборки webpack с целью разделить процесс рендеринга и сборки. Единственной проблемой было то, что большинство пользователей Nuxt не могли раскрыть весь потенциал разделения... **пока что**. | ||
|
||
- [Introduction](#introduction) | ||
- [Faster Static Deployments](#faster-static-deployments) | ||
- [Generate time: cache vs full webpack build](#generate-time-cache-vs-full-webpack-build) | ||
- [Using in your projects](#using-in-your-projects) | ||
- [Excluding Files from Cache](#excluding-files-from-cache) | ||
- [Module Authors](#module-authors) | ||
- [How it works](#how-it-works) | ||
- [Back to old school commands](#back-to-old-school-commands) | ||
- [What to do next](#what-to-do-next) | ||
- [Введение](#introduction) | ||
- [Быстрое статическое развертывание](#faster-static-deployments) | ||
- [Время генерации: кэш против полной сборки webpack](#generate-time-cache-vs-full-webpack-build) | ||
- [Использование в ваших проектах](#using-in-your-projects) | ||
- [Исключение файлов из кэша](#excluding-files-from-cache) | ||
- [Авторы модулей](#module-authors) | ||
- [Как это работает](#how-it-works) | ||
- [Возвращение к старым командам](#back-to-old-school-commands) | ||
- [Что делать дальше](#what-to-do-next) | ||
|
||
## Faster Static Deployments | ||
## [](#faster-static-deployments)Быстрое статическое развертывание | ||
|
||
With v2.14, `nuxt generate` will **automagically skip webpack build step when no code has been changed** and use the previous build using cache. This will help to drastically improve static deployments time by avoiding unnecessary builds which is usually the most time-consuming part of generation process. Cache support is **platform-agnostic** and works on Netlify, Vercel, or any other CI/CD setup that is caching `node_modules`. | ||
С версии 2.14 `nuxt generate` **автоматически пропустит шаг сборки webpack, если код не был изменен**, и будет использовать предыдущую сборку с помощью кэша. Это поможет значительно сократить время статического развертывания, избегая ненужных сборок, которые обычно являются наиболее затратной по времени частью процесса генерации. Поддержка кэша является **платформенно-независимой** и работает на Netlify, Vercel или любом другом настроенном CI/CD, который кэширует `node_modules`. | ||
|
||
::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.jpg" controls autoplay} | ||
:source{src="https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.webm" type="video/webm"} | ||
:source{src="https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.mp4" type="video/mp4"} | ||
:source{src="https://res.cloudinary.com/nuxt/video/upload/v1595852304/nuxt-smart-generate_pjaat1.ogg" type="video/ogg"} | ||
:: | ||
|
||
## Generate time: cache vs full webpack build | ||
## [](#faster-static-deployments)Время генерации: кэш против полной сборки webpack | ||
|
||
See the comparison in seconds between two `nuxt generate`: | ||
Сравните время в секундах между двумя `nuxt generate`: | ||
|
||
- `Build` is when a webpack build is required | ||
- `Cache` is only when the content has changed (webpack build skipped) | ||
- `Build` когда требуется сборка webpack | ||
- `Cache` только когда изменилось содержимое (сборка webpack пропущена) | ||
|
||
![Comparison between build VS cache time](/assets/blog/bar-chart-cache-build.png) | ||
![Сравнение времени сборки и кэширования](/assets/blog/bar-chart-cache-build.png) | ||
|
||
::tip | ||
The static site generation of our projects on content changes are now **~3.6x times** faster 🚀 | ||
Статическая генерация наших проектов при изменении контента теперь в **~3,6 раза** быстрее 🚀 | ||
:: | ||
|
||
Project links: [Basic](https://github.com/pi0/nuxt-static-demo), [Strapi Module Docs](https://github.com/nuxt-community/strapi-module/tree/master/docs), [Content Module Docs](https://github.com/nuxt/content/tree/master/docs) and [Nuxt 2 Docs](https://github.com/nuxt/website-v2). | ||
Ссылки на проекты: [Basic](https://github.com/pi0/nuxt-static-demo), [Strapi Module Docs](https://github.com/nuxt-community/strapi-module/tree/master/docs), [Content Module Docs](https://github.com/nuxt/content/tree/master/docs) и [Nuxt 2 Docs](https://github.com/nuxt/website-v2). | ||
|
||
## Using in your projects | ||
## [](#using-in-your-projects)Использование в ваших проектах | ||
|
||
1. Update `nuxt` to the latest minor version, which is v2.14. | ||
1. Обновите `nuxt` до последней дополнительной версии, которой является v2.14. | ||
|
||
::code-group | ||
```bash [Yarn] | ||
yarn upgrade nuxt | ||
``` | ||
```bash [NPM] | ||
npm update | ||
``` | ||
:: | ||
::code-group | ||
|
||
2. Ensure `target` is `static` inside your `nuxt.config` | ||
```bash [Yarn] | ||
yarn upgrade nuxt | ||
``` | ||
|
||
```js{}[nuxt.config.js] | ||
export default { | ||
target: 'static' | ||
// ... | ||
} | ||
``` | ||
```bash [NPM] | ||
npm update | ||
``` | ||
|
||
:: | ||
|
||
2. Убедитесь, что `target` имеет значение `static` в вашем `nuxt.config` | ||
|
||
```js{}[nuxt.config.js] | ||
export default { | ||
target: 'static' | ||
// ... | ||
} | ||
``` | ||
|
||
`nuxt generate` will behave as before to avoid breaking changes and provide legacy compatibility if you keep `target: ‘server’` or don't specify target. | ||
`nuxt generate` будет вести себя так же, как и раньше, чтобы избежать изменений, несовместимых с предыдущими версиями, и обеспечить обратную совместимость, если вы сохраните `target: ‘server’` или не укажете цель. | ||
|
||
3. That’s it 🙌 | ||
3. Это все 🙌 | ||
|
||
Now, the `nuxt generate` command will build the project only if necessary, which is the case when files inside the project have been changed. It will always re-render your routes to static HTML files, like `nuxt export` is doing already. | ||
Теперь команда `nuxt generate` будет создавать проект только при необходимости, то есть когда файлы в проекте были изменены. Она всегда повторно рендерит ваши маршруты в статические HTML-файлы, как это уже делает `nuxt export`. | ||
|
||
Now you only have to change your build command back from `nuxt build && nuxt export` to `nuxt generate` on the platform you are using. If you are using a CI, ensure that you are properly caching `node_modules`. | ||
Теперь вам нужно изменить команду сборки с `nuxt build && nuxt export` на `nuxt generate` на платформе, которую вы используете. Если вы используете CI, убедитесь, что вы правильно кэшируете `node_modules`. | ||
|
||
### Excluding Files from Cache | ||
### [](#excluding-files-from-cache)Исключение файлов из кэша | ||
|
||
By default, nuxt ignores these directories so if any change happens inside them, build will not be triggered: | ||
По умолчанию nuxt игнорирует эти директории, так что если в них произойдут изменения, сборка не будет запущена: | ||
|
||
- Build directory (`.nuxt/`) | ||
- Static directory (`static/`) | ||
- Generate dist (`dist/`) | ||
- Директория сборки (`.nuxt/`) | ||
- Директория статики (`static/`) | ||
- Директория генерации (`dist/`) | ||
- `node_modules` | ||
- `README.md` | ||
- Hidden dotfiles (like `.npmrc`) | ||
- Скрытые файлы (например, `.npmrc`) | ||
|
||
You can add more patterns using [generate.cache.ignore](https://v2.nuxt.com/docs/configuration-glossary/configuration-generate/#cache) option in `nuxt.config`: | ||
Вы можете добавить больше шаблонов с помощью параметра [generate.cache.ignore](https://v2.nuxt.com/docs/configuration-glossary/configuration-generate/#cache) в `nuxt.config`: | ||
|
||
```js{}[nuxt.config.js] | ||
export default { | ||
generate: { | ||
cache: { | ||
ignore: [ | ||
// When something changed in the docs folder, do not re-build via webpack | ||
// Когда что-то изменилось в папке docs, не пересобирайте через webpack | ||
'docs' | ||
] | ||
} | ||
} | ||
} | ||
``` | ||
|
||
It is also possible to use a function for `ignore` option to override default ignore entries. | ||
Также можно использовать функцию для параметра `ignore`, чтобы переопределить стандартные записи игнорирования. | ||
|
||
### Module Authors | ||
### [](#module-authors)Авторы модулей | ||
|
||
What if you are developing a nuxt module that is working with files that should not trigger a rebuild? The best example is for [@nuxt/content](https://content.nuxtjs.org) module that reads markdown files from the repository. In this case, these files are used within a runtime module, which is the case when using `@nuxt/content`, the module itself can tell nuxt to ignore these files for you already so you don't have to do anything! Module authors can use the new `generate:cache:ignore` hook to do so: | ||
Что делать, если вы разрабатываете модуль nuxt, который работает с файлами, которые не должны запускать повторную сборку? Лучшим примером является модуль [@nuxt/content](https://content.nuxtjs.org), который читает файлы markdown из репозитория. В этом случае эти файлы используются в модуле времени выполнения, что имеет место при использовании `@nuxt/content`, сам модуль может сообщить nuxt игнорировать эти файлы для вас, так что вам не нужно ничего делать! Авторы модулей могут использовать новый хук `generate:cache:ignore` для этого: | ||
|
||
```js | ||
nuxt.hook('generate:cache:ignore', ignore => ignore.push('content')) | ||
``` | ||
|
||
## How it works | ||
## [](#how-it-works)Как это работает | ||
|
||
When using the new `nuxt generate` with `static` target, a snapshot including checksum of non-ignored project files as well as nuxt version and some other configuration will be written `.nuxt/build.json`. In addition, we also move the build directory to `node_modules/.cache/nuxt`. Because `node_modules` is cached by all major platforms (Netlify, Vercel, ...) and common CI/CD scripts, this solution works out of the box without additional configuration. | ||
При использовании новой команды `nuxt generate` с целью `static` будет создан снимок, включающий контрольную сумму файлов проекта, не включенных в игнорирование, версию nuxt и некоторую другую конфигурацию, и записан в `.nuxt/build.json`. Кроме того, мы также перемещаем директорию сборки в `node_modules/.cache/nuxt`. Поскольку `node_modules` кэшируется всеми основными платформами (Netlify, Vercel, ...) и общими скриптами CI/CD, это решение работает из коробки без дополнительной настройки. | ||
|
||
When `nuxt generate` is called subsequently, it will again create a checksum based on your project files and then compare it to the existing one inside `node_modules/.cache/nuxt/build.json`. | ||
При последующем вызове `nuxt generate` он снова создаст контрольную сумму на основе файлов вашего проекта и сравнит ее с существующей в `node_modules/.cache/nuxt/build.json`. | ||
|
||
If they match, it means that nothing is changed that needs rebuild so we can directly start rendering pages. | ||
Если они совпадают, это означает, что ничего не изменилось, что требует повторной сборки, поэтому мы можем непосредственно начать рендеринг страниц. | ||
|
||
If a mismatch is detected, it means that a full rebuild would be necessary. You can also see what file caused rebuild by checking console logs. After the build, nuxt generate will save the new checksum inside `.nuxt/build.json`. You can check full implementation [here](https://github.com/nuxt/nuxt.js/pull/7712). | ||
Если обнаружено несоответствие, это означает, что потребуется полная пересборка. Вы также можете увидеть, какой файл вызвал повторную сборку, проверив журналы консоли. После сборки nuxt generate сохранит новую контрольную сумму в `.nuxt/build.json`. Вы можете проверить полную реализацию [здесь](https://github.com/nuxt/nuxt.js/pull/7712). | ||
|
||
### Back to old school commands | ||
### [](#back-to-old-school-commands)Возвращение к старым командам | ||
|
||
With Nuxt v2.13, we introduced `nuxt export` and `nuxt serve` specially designed for the static target. With Nuxt v2.14, they are deprecated as `nuxt generate` and `nuxt start` is smart to detect the target and build when necessary. | ||
С версии Nuxt v2.13 мы представили команды `nuxt export` и `nuxt serve`, специально разработанные для статической цели. С версии Nuxt v2.14 они устарели, поскольку `nuxt generate` и `nuxt start` умны для определения цели и сборки при необходимости. | ||
|
||
Server target: | ||
Цель сервера: | ||
|
||
- `nuxt dev` = development server | ||
- `nuxt build` = build your application for production | ||
- `nuxt start` = start the production server (use it for Node.js hosting like Heroku, Digital Ocean, etc) | ||
- `nuxt dev` = сервер разработки | ||
- `nuxt build` = сборка вашего приложения для продакшена | ||
- `nuxt start` = запуск сервера продакшена (используйте его для хостинга Node.js, такого как Heroku, Digital Ocean и т.д.) | ||
|
||
Static target: | ||
Статическая цель: | ||
|
||
- `nuxt dev` = development server | ||
- `nuxt generate` = build if needed and statically export to `dist/` | ||
- `nuxt start` = serve the `dist/` directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying | ||
- `nuxt dev` = сервер разработки | ||
- `nuxt generate` = сборка при необходимости и статический экспорт в `dist/` | ||
- `nuxt start` = предоставление директории `dist/` так, как это делает ваш статический хостинг (Netlify, Vercel, Surge и т.д.). Отлично для тестирования перед развертыванием | ||
|
||
## What to do next | ||
## [](#what-to-do-next)Что делать дальше | ||
|
||
- Upgrade your project to [[email protected]](https://github.com/nuxt/nuxt.js/releases/tag/v2.14.0) | ||
- Use `nuxt generate` instead of `nuxt export` | ||
- Use `nuxt start` instead of `nuxt serve` | ||
- Enjoy fast deployments 🤙 | ||
- Обновите ваш проект до [[email protected]](https://github.com/nuxt/nuxt.js/releases/tag/v2.14.0) | ||
- Используйте `nuxt generate` вместо `nuxt export` | ||
- Используйте `nuxt start` вместо `nuxt serve` | ||
- Наслаждайтесь быстрым развертыванием 🤙 |