Мы живем в эпоху производительности. Ваше приложение должно быть быстрым, и не только сейчас.
Прошли те времена, когда пользователи ждали минуты… Подумайте об этих минутах! Для загрузки приложения.
Статистика показывает, что 25% пользователей покидают страницу через 2 секунды, и на каждые 100 мс задержки мы получаем примерно на 1,11% меньше взаимодействия с пользователем, принимая во внимание, что медленный сайт действительно влияет на вашу прибыль экспоненциально.
Более быстрые сайты сообщили о повышении вовлеченности пользователей на 70% и увеличении количества просмотров рекламы.
Хорошо, хорошо, нам нужно отправить товар быстро, но как?
В моей маленькой консалтинговой компании, где мы создаем в основном прогрессивные веб-приложения и приложения Immersive Media, мы используем webpack для объединения наших веб-сайтов в пакеты. некоторые из наших любимых методов:
- Установите рабочую среду
При запуске webpack для создания производственного пакета убедитесь, что ваша среда настроена на производственную среду. Использование флага «p» или «NODE_ENV = production»
NODE_ENV=production webpack
or
webpack -p
Будьте осторожны и не включайте оба этих параметра одновременно, поскольку они, кажется, противоречат друг другу.
Большая часть приведенного ниже кода войдет в ваш файл конфигурации веб-пакета
2. Применяйте загрузчики только к файлам, которые в них нуждаются.
У каждого загрузчика веб-пакетов или плагина есть дополнительное время загрузки. Чем больше вы используете, тем больше времени потребуется. Безопасным вариантом было бы использовать как можно меньше, а также рассмотреть возможность применения загрузчиков / плагинов только к файлам, которые в них нуждаются, а не ко всем файлам определенного типа.
{
test: /\.js$/,
include: path.resolve(__dirname, "src"),
loader: "babel-loader"
}
3. Избегайте создания исходных карт в производственной среде.
Зачем вам в любом случае они предназначены для отладки, и, надеюсь, вы не делаете этого в производственной среде
devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map',
4. Уменьшите размер ваших производственных пакетов.
Используя UglifyJSPlugin, который поставляется с веб-пакетом, мы можем значительно уменьшить размер наших окончательных пакетов.
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: false, } }),
5. Извлечение и сокращение вашего CSS
Недавно мы перешли на стилизованные компоненты, и у меня не было времени опробовать это в производственной среде, но основная суть заключается в извлечении вашего CSS, чтобы у вас была таблица стилей. для вашего приложения продолжайте уменьшать эту таблицу стилей, и вы, вероятно, купили себе несколько секунд!
module.exports = { module:{ rules: [ { test: /\.css$/, use:[ 'style-loader', { loader: 'css-loader', options: { minimize: true } } ] } ] }
6. Treeshaking
Мы загружаем и импортируем модули из библиотек и других файлов, которые нам нужны. Иногда мы импортируем что-то, но не используем это или, что еще чаще, используем только часть этого. Treeshaking в webpack позволяет исключить мертвый код или неиспользуемый код. Начиная с webpack 2, это поддерживается модулями es2015, и вы их используете, не так ли?
7.Закрепите ваши ресурсы
Используя плагин сжатия, можно динамически сжимать ресурсы во время сборки, чтобы уменьшить размер ресурсов до 80%! Ого, 80%. Этот продает сам себя.
new CompressionPlugin({ asset: "[path].gz[query]", algorithm: "gzip", test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: 0.8 }),
Мы все используем библиотеки, такие как react, firebase, angular и многие другие, нам не нужно раздувать наши пакеты этими библиотеками, было бы неплохо, если бы мы могли вытащить их в собственный пакет и кэшировать их на стороне клиента, если нам повезет, они могут уже быть в кеше, и нам не придется ждать, пока клиент их загрузит! Как насчет этого
new webpack.optimize.CommonsChunkPlugin({ name: "commons", filename: "commons.js", Infinity }),
Как вы пользуетесь веб-пакетом?
Вы пользуетесь веб-пакетом?
Если вы хотите увидеть больше подобных статей о производительности, нажмите значок сердечка, чтобы сообщить нам об этом!
Вернуться к коду 😝
Ссылки
https://webpack.js.org/guides/build-performance/
https://developers.google.com/web/tools/lighthouse/audits/first-meaningful- краска
https://blog.kissmetrics.com/loading-time/
Https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318