Понять, что нужно, чтобы ваше приложение React было быстрее
В этой статье мы увидим, как можно оптимизировать приложение React, созданное в предыдущей статье ЗДЕСЬ.
Для начала клонируйте репозиторий с https://github.com/myogeshchavan97/react_node
Запустите приложение, последовательно выполнив следующие команды
npm install npm run build npm run start-server
Откройте инструмент разработчика Chrome и проверьте bundle.js размер файла. Как видите, это почти 1,3 МБ
Также, если вы проверите вкладку «Источники», вы увидите весь написанный нами код под webpack://
Это явно нехорошо. Поскольку вы никогда не захотите видеть свой код кем-либо, когда ваше приложение запущено в производство. Поэтому, чтобы исправить эти проблемы, мы используем технику оптимизации приложения.
Webpack предоставляет простой способ оптимизации с помощью флага -p.
Если вы видите наш текущий раздел скриптов в package.json, он выглядит следующим образом
Мы добавим сюда еще один скрипт с флагом -p
"build-prod": "webpack -p"
Теперь раздел скриптов выглядит так
Выполните следующую команду из терминала
npm run build-prod
и проверьте вывод
Как видите, размер файла уменьшился с 1,3 МБ до 169 КБ.
Вы увидите тот же размер 169 КБ, если теперь запустите приложение с помощью npm run start-server и проверьте вкладку сети.
и если вы проверите вкладку источников, вы больше не увидите наш код в webpack://
В приложении все еще есть проблема.
Если вы откроете src/app.js, вы увидите, что мы включили импорт для файла CSS вверху, что является обычной практикой в React.
import './css/styles.css';
Таким образом, CSS не будет загружен, пока не будет загружен javascript, что является проблемой. Итак, теперь мы извлечем CSS из bundle.js и создадим отдельный файл .css.
Итак, начнем с этого.
Установите пакет npm mini-css-extract-plugin, выполнив следующую команду
npm install mini-css-extract-plugin
После установки откройте файл package.json и измените
"build-prod": "webpack -p"
to
"build-prod": "webpack -p --env production"
Здесь мы добавляем переменную среды со значением production.
Теперь в webpack.config.js файле изменим
module.exports = { };
to
module.exports = (env) => {};
Здесь мы возвращаем функцию вместо объекта, поэтому первый параметр функции получит значение переменной среды, которое мы установили в package.json
Ваш webpack.config.js теперь будет выглядеть так:
Теперь мы будем использовать файл mini-css-extract-plugin в webpack.config.js для извлечения CSS.
Добавьте импорт для плагина вверху
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
измените use массив CSS с
use: ['style-loader', 'css-loader']
to
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.join(__dirname, 'public')
},
}, 'css-loader'
]
Здесь мы говорим, где создать новый файл CSS.
изменить режим с
mode: 'development'
to
mode: env ? 'production' : 'development'
и добавить новое свойство плагинов в конце
plugins: [
new MiniCssExtractPlugin({
filename: 'main.css',
chunkFilename: 'main.css',
})]
Здесь мы говорим создать отдельный файл CSS с именем main.css
Теперь добавьте ссылку на файл main.css в файл public/index.html
<link rel="stylesheet" href="main.css"></link>
Теперь запустите следующую команду
npm run build-prod
Это создаст новый main.css файл внутри папки public. Вы сможете увидеть отдельные main.css и bundle.js, как показано ниже.
Теперь вы видите, bundle.js размер файла немного уменьшился, и это хорошо.
Теперь, если вы запустите приложение, используя
npm run start-server
вы увидите отдельный main.css файл, загруженный в браузер вместо единственного bundle.js
и приложение по-прежнему работает нормально, и теперь оно будет загружаться быстрее.
Развернуть на Heroku:
1. Установите пакет Heroku, используя
npm install -g heroku
2. Выполните следующую команду с терминала.
heroku login
Это приведет к перенаправлению на сайт Heroku, где вы должны нажать кнопку входа в систему, чтобы войти в heroku-cli
3. После того, как вы нажмете кнопку входа в систему, вы можете переключиться в командную строку и начать процесс развертывания с вашей учетной записью Heroku.
4. Для развертывания на Heroku необходимо внести некоторые изменения в код.
- Откройте файл
server/index.jsи добавьте следующий операторconst port = process.env.PORT || 3000;
, а в методеapp.listenпередайте переменнуюportвместо 3000.
Это потому, что Heroku создает переменную среды с именем PORT и назначает случайное порт для вашего приложения, который вы можете использовать - Добавьте
startскрипт вpackage.json, который будет автоматически выполняться при развертывании приложения на Heroku. - Так что откройте
package.jsonи измените
"start": "webpack-dev-server --watch"
to
"start-server": "webpack-dev-server --watch"
и изменить
"start-server": "nodemon server/index.js"
to
"start": "npm run build-prod && node server/index.js"
Здесь мы запускаем сначала сценарий npm run build-prod, а затем node server / index.js
Нам не нужно nodemon, поскольку после развертывания мы не вносим никаких изменений в производственную среду, поэтому перезапускать сервер не требуется.
Таким образом, при развертывании приложения в Heroku будет выполняться только сценарий start.
5. Создайте новое приложение на Heroku, используя следующую команду
heroku create <any_application_name> Ex. heroku create my-first-app
6. Как только это будет сделано, приложение будет создано на Heroku, и мы готовы развернуть код.
7. Сделайте текущий проект репозиторием git, выполнив следующую команду
git init . // it's ( git init dot )
8. Теперь добавьте все свои изменения в область подготовки с помощью
git add --all .
9. Зафиксируйте изменения, используя
git commit -m "changes"
10. Отправьте код в Heroku.
git push heroku master
11. Поздравляем, вы установили приложение на Heroku.
Живая демонстрация: https://my-node-react-app.herokuapp.com/
Полный исходный код: https://github.com/myogeshchavan97/react_node_optimized
На сегодня все. Надеюсь, вы узнали что-то новое сегодня.
Не забудьте подписаться, чтобы получать мою еженедельную рассылку с замечательными советами, приемами и статьями прямо в свой почтовый ящик здесь.
