Установка React+Babel+Webpack ⚛

https://www.valentinog.com/blog/react-webpack-babel/#How_to_set_up_React_Webpack_and_Babel_what_you_will_learn

#js #jsarticle #javascript #react #babel #backend #frontend #npm #webpack #webdev #web

Nuxt.js: Webpack 4, ESM модули, create-nuxt-app и другое! 👨‍💻

#nuxtjs #vuejs #webpack #esm #js #javascript #jsarticle #frontend #webdev #web

Пособие по Webpack 📦

#webdev #webpack #javascript #frontend #jsarticle #js

React, SCSS и Webpack

#react #scss #sass #webdev #webpack #javascript #jsarticle #frontend

Rollup VS Webpack VS Parcel

#rollup #webpack #webdev #parcel #jsarticle #javascript #jstools

Как совместить Babel 7 и Webpack 4, для того чтобы создать крутое React приложение

#webpack #babel #jsarticle #frontend #webdev #react #javascript

import-http, плагин для Webpack и Rollup, позволяющий импортировать модули из CDN

Главный бонус плагина в том, что он качает только то, что используется модулем (только js файлы), и ничего другого, следовательно ваш бандл получится очень лёгким

#jstools #javascript #importhttp #webdev #webpack #rollup #frontend

Возможно вам не нужен CRA

#jsarticle #javascript #cra #react #parcel #webpack #frontend #webdev

Пост с канала @defront

Команда разработчиков Chrome активно контрибьютит в инструменты js-экосистемы и фреймворки. Хуссейн Джирде написал статью про один из таких кейсов сотрудничества — "Improved Next.js and Gatsby page load performance with granular chunking".

В Next.js и Gatsby в бандл commons попадал код, который использовался более чем на 50% страниц. Такая настройка была не очень эффективна, так как общий код оставшихся 50% страниц не разделялся между чанками. Для решения этой проблемы была адаптирована стратегия, в которой с помощью SplitChunksPlugin:
— все модули больше 160kb выносятся в индивидуальные чанки;
— создаётся отдельный чанк frameworks с кодом, который используется на всех страницах ( react, react-dom и т.п.);
— создаётся столько общих чанков, сколько webpack посчитает нужным создать, но не более 25.

Такие настройки позволяют улучшить скорость загрузки и улучшить утилизацию кеша при переходе между страницами. При переходе на новую стратегию разделения чанков общий размер генерируемого js-кода на production-сайтах уменьшился в среднем на 20%.

Рекомендую почитать статью, если интересуетесь темой производительности.

#webpack #performance

https://web.dev/granular-chunking-nextjs/

​​desvg - инструмент для превращения SVG в React компоненты

Есть поддержка Webpack (desvg-loader)
Работает с Preact

#jslib #react #frontend #webdev #preact #svg #webpack

​​art-template - быстрый движок для шаблонов

Самый быстрый шаблонизатор из всех существующих на данный момент

Работает как в Node.js так и в браузере

Поддерживает Express, Koa и Webpack

Браузерная версия весит всего 6KB

#jslib #javascript #frontend #backend #fullstack #webdev #express #nodejs #webpack #koa

​​esbuild-loader - Webpack лоадер на основе на esbuild

Значительно ускоряет скорость сборки благодаря тому, что esbuild в разы быстрее Webpack

В отличие от сырого esbuild, с esbuild-loader также можно подключать дополнительные настройки и плагины, как в и обычном Webpack

#jslib #javascript #frontend #webdev #esbuild #esm #webpack