Удаление неиспользуемого CSS и оптимизация изображений в webpack

Иногда, в целях ускорения загрузки страницы неплохо было бы удалить CSS-стили, которые не используются на сайте. Да и статические изображения (например изображения логотипов) тоже хотелось бы сжать. Понятное дело, сделать все это хочется автоматически =)

Тут снова поможет webpack, плагин purifycss-webpack, а также image-webpack-loader.

Для начала установим недостающие зависимости:

npm i purifycss-webpack glob-all image-webpack-loader -D

Удаляем неиспользуемый CSS из сборки

На небольшом проекте, удаление неиспользуемого CSS сократило размер основного CSS-файла в два раза! В моем случае был основательно сокращены стили bootstrap’а.

webpack.config.js

const globAll = require('glob-all');
const PurifyCSSPlugin = require('purifycss-webpack');

...

plugins: [
 ...
 new PurifyCSSPlugin({
   minimize: true,
   paths: globAll.sync([
     // Указываем файлы, в которых находится разметка с css-классами
     // Это могут быть *.html, *.php, и даже *.jsx файлы
     path.join(__dirname, '*.php'),      
     path.join(__dirname, 'theme/*.php')
   ])
 })
]

Оптимизируем изображения

Ниже приведен пример только для jpeg, однако данный лоадер отлично умеет сжимать и другие форматы изображений (описание плагина на github).

webpack.config.js

...
module: {
  rules: [{
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [
      'file-loader', {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: {
            progressive: true,
            quality: 70
          }
        }
      },
    ],
  }]
}
...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.