Повысьте свою производительность с помощью этих 6 потрясающих плагинов Webpack

Webpack
Повысьте свою производительность с помощью этих 6 потрясающих плагинов Webpack

Плагины webpack используются для выполнения более широкого круга задач, таких как оптимизация пакетов, управление активами и внедрение переменных среды.

Сам веб-пакет построен на той же системе плагинов, что и конфигурация веб-пакета. В зависимости от того, как вы используете Webpack, существует несколько способов использования плагинов.

Без лишних слов, вот шесть замечательных плагинов для веб-пакетов.

Webpack Bundle Analyzer

Визуализируйте размер выходных файлов веб-пакета с помощью интерактивной масштабируемой древовидной карты.

Этот плагин поможет вам сделать следующее:

  1. Знай, что на самом деле в твоей сумке
  2. Узнайте, какие модули составляют большую часть пакета
  3. Найдите ошибочно прибывший модуль
  4. Оптимизация пакета Webpack

Установить

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

использовать

const BundleAnalyzerPlugin = require('webpack-bundle analyzer');
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

offline-plugin

offline-pluginРазработан для обеспечения работы в автономном режиме для проектов веб-пакетов.

Этот плагин используетServiceWorkerа такжеAppCacheкак бэкверный двигатель. Просто включить этот плагин вwebpack.config, и включите сопутствующую среду выполнения в сценарии на стороне клиента, закэшировав все (или некоторые) выходные ресурсы веб-пакета, ваш проект перейдет в автономный режим.

Установить

npm install offline-plugin [--save-dev]

использовать

Во-первых, в вашемwebpack.configСоздайте плагин в:

// webpack.config.js example
var OfflinePlugin = require('offline-plugin');
module.exports = {
  // ...
  plugins: [
    // ... other plugins
    // 如果OfflinePlugin是最后添加的插件，那就更好了
    new OfflinePlugin()
  ]
  // ...
}

И вы можете настроить параметры. Затем добавьте среду выполнения в файл записи (обычно запись):

require('offline-plugin/runtime').install();

ES6/Babel/TypeScript

import * as OfflinePluginRuntime from 'offline-plugin/runtime';
OfflinePluginRuntime.install();

СвязанныйTypeScriptДля получения более подробной информации о использовании см.здесь.

webpack-pwa-manifest

webpack-pwa-manifestОписывает себя как «Прогрессивный генератор манифестов веб-приложений для Webpack с автоматическим изменением размера значков и поддержкой отпечатков пальцев».

webpack-pwa-manifestэто плагин веб-пакета, который генерирует для вашего прогрессивного веб-приложенияmanifest.json.

Если вы используете впрыск на конфигурации, убедитесь, чтоHtmlWebpackPluginПоявляться вpluginsв массивеWebpackPwaManifestДо.

характерная черта

  • Автоматическое изменение размера значка
  • значок отпечатка пальца
  • Контрольный список отпечатков пальцев
  • Автоматическая инъекция манифеста в HTML
  • Поддержка горячей перезагрузки

Установить

npm install --save-dev webpack-pwa-manifest

использовать

В твоемwebpack.config.jsсередина:

import WebpackPwaManifest from 'webpack-pwa-manifest'
...
plugins: [
  new WebpackPwaManifest({
    name: 'My Progressive Web App',
    short_name: 'MyPWA',
    description: 'My awesome Progressive Web App!',
    background_color: '#ffffff',
    crossorigin: 'use-credentials', // 可以是null、use-credentials还是anonymous
    icons: [
      {
        src: path.resolve('src/assets/icon.png'),
        sizes: [96, 128, 192, 256, 384, 512] // 多个大小
      },
      {
        src: path.resolve('src/assets/large-icon.png'),
        size: '1024x1024' // 你还可以使用specification模式
      }
    ]
  })
]

imagemin-webpack-plugin

imagemin-webpack-pluginэто плагин веб-пакета для использованияimageminСжимайте изображения.

Установить

npm install imagemin-webpack-plugin

использовать

import ImageminPlugin from 'imagemin-webpack-plugin'
module.exports = {
  plugins: [
    // 确保插件位于添加图像的插件之后
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 在开发过程中禁用
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}

prerender-spa-plugin

prerender-spa-pluginПредварительный рендеринг статического HTML в одностраничные приложения.

Цель этого плагина — предоставить простое решение для предварительного рендеринга, которое легко масштабируется и работает с любым веб-сайтом или одностраничным приложением, созданным с помощью веб-пакета.

Что такое пререндеринг?

В последнее время рендеринг на стороне сервера (SSR) штурмом покорил мир внешнего интерфейса JavaScript. Тот факт, что теперь вы можете визуализировать свой веб-сайт и приложение на сервере, прежде чем отправить его своему клиенту, определенно является революционной идеей (все делали это до того, как JS-приложения на стороне клиента стали популярными, чего не было до появления JS-клиента). приложения стали популярными).

Однако то, что в прошлом подвергалось критике для веб-сайтов PHP, ASP, JSP (и т. д.), теперь то же самое для рендеринга на стороне сервера. Он медленный, довольно легко дает сбой, и его трудно исправить.

Дело в том, что SSR вам, скорее всего, не нужен, что бы там ни говорили другие. Вы можете получить почти все его преимущества (без недостатков), используя предварительное распространение. Предварительный рендеринг обычно запускает безголовый браузер, загружает маршруты приложения и сохраняет результат в статический HTML-файл. Затем вы можете использовать его с любым решением для обслуживания статических файлов, которое вы использовали ранее. Он работает только с навигацией HTML5 и т. д. Нет необходимости изменять код или добавлять обходные пути рендеринга на стороне сервера.

Установить

yarn add -D prerender-spa-plugin

основное использование

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // 必需的——指向webpack输出应用程序的prerender路径。
      staticDir: path.join(__dirname, 'dist'),
      // 必需的 - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}

duplicate-package-checker-webpack-plugin

Это плагин для веб-пакетов, который предупредит вас, если ваш пакет содержит несколько версий одного и того же пакета.

Почему?

Один пакет может быть включен несколько раз в пакет веб-пакета из-за разных версий пакета. Это может произойти без какого-либо предупреждения, вызывая дополнительное раздувание пакета и, возможно, приводя к трудно обнаруживаемым ошибкам.

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

Установить

npm install duplicate-package-checker-webpack-plugin --save-dev

использовать

Добавьте плагин в конфигурацию вашего веб-пакета:

const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
module.exports = {
  plugins: [new DuplicatePackageCheckerPlugin()]
};

Статья была впервые опубликована в публичном аккаунте«Фронтальный выбор иностранного языка», ответ личным письмом: Большой подарочный пакет, отправка по сети качественных видеокурсов онлайн с информацией о дисках, это точно сэкономит вам кучу денег!

Категории