Мы живем в эпоху производительности. Ваше приложение должно быть быстрым, и не только сейчас.

Прошли те времена, когда пользователи ждали минуты… Подумайте об этих минутах! Для загрузки приложения.

Статистика показывает, что 25% пользователей покидают страницу через 2 секунды, и на каждые 100 мс задержки мы получаем примерно на 1,11% меньше взаимодействия с пользователем, принимая во внимание, что медленный сайт действительно влияет на вашу прибыль экспоненциально.

Более быстрые сайты сообщили о повышении вовлеченности пользователей на 70% и увеличении количества просмотров рекламы.

Хорошо, хорошо, нам нужно отправить товар быстро, но как?
В моей маленькой консалтинговой компании, где мы создаем в основном прогрессивные веб-приложения и приложения Immersive Media, мы используем webpack для объединения наших веб-сайтов в пакеты. некоторые из наших любимых методов:

  1. Установите рабочую среду
    При запуске 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
 }),

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