preload webpack plugin Download - Загрузка исходного кода preload webpack plugin Скачать исходный код

preload webpack plugin

Данные веб-сайта

3.0.0 alpha 1

Скачать

Preload-Webpack-Plugin

Управление: вилка этого проекта, https://github.com/vuejs/preload-webpack-plugin можно использовать вместо этого.

Плагин WebPack для автоматической подключения асинхронных (и других типов) кусков JavaScript с использованием <link rel='preload'> . Это помогает с ленивой загрузкой.

Примечание. Это расширительный плагин для html-webpack-plugin -плагин, который упрощает создание HTML-файлов для обслуживания ваших пакетов WebPack.

Введение

Предварительная загрузка - это веб -стандарт, направленный на повышение производительности и гранулированную загрузку ресурсов. Это декларативная выборка, которая может сказать браузеру начать извлечение источника, потому что разработчик знает, что ресурс будет необходим в ближайшее время. Предварительная нагрузка: Для чего она хороша? это рекомендуемое чтение, если вы не использовали эту функцию раньше.

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

Например, chunk.31132ae6680e598f8879.js .

Чтобы облегчить подключение асинхронных кусков для ленивой загрузки, этот плагин предлагает их, чтобы подключить их, используя <link rel='preload'> .

Предварительные условия

Этот модуль требует WebPack V4 и выше. Также требуется, чтобы вы использовали html-webpack-plugin в вашем проекте WebPack.

Установка

Во -первых, установите пакет как зависимость в вашем package.json .

$ npm install --save-dev preload-webpack-plugin

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

В вашей конфигурации WebPack require() плагин предварительной нагрузки следующим образом:

 const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ;

И, наконец, добавьте плагин в массив plugins вашей веб -пакета после HtmlWebpackPlugin :

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( )
]

При предварительной загрузке файлов плагин будет использовать атрибут as атрибут, зависит от типа каждого файла. as=font .woff2 as=script as=style .css

Если вы не предпочитаете определять as атрибут, зависит от суффикса имени файла, вы также можете явно назвать его, используя as :

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    as : 'script'
  } )
]

Если вам нужно более мелкозернистый контроль над атрибутом as , вы также можете предоставить здесь функцию. При его использовании имя входа будет предоставлено в качестве параметра, а сама функция должна вернуть строку для as :

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    as ( entry ) {
      if ( / .css$ / . test ( entry ) ) return 'style' ;
      if ( / .woff$ / . test ( entry ) ) return 'font' ;
      if ( / .png$ / . test ( entry ) ) return 'image' ;
      return 'script' ;
    }
  } )
]

Обратите внимание, что если as=font используется в предварительной нагрузке, также будет добавлен crossorigin . Объясняет в этой статье, и список общих as можно найти на MDN.

По умолчанию плагин будет предполагать, что асинхронные сценарии будут предварительно загружены. Это эквивалент:

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : 'asyncChunks'
  } )
]

Для проекта, генерирующего два асинхровых сценария с динамически сгенерированными именами, такими как chunk.31132ae6680e598f8879.js и chunk.d15e7fdfc91b34bb78c4.js <head>

 < link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " >

Вы также можете настроить плагин для предварительной загрузки всех кусков (поставщика, асинхронизации и нормальных кусков), используя include: 'allChunks' или только предварительные начальные куски с include: 'initial' .

В Webpack очень часто используется загрузчики, такие как file-loader для генерации активов для определенных типов, таких как шрифты или изображения. Если вы хотите предварительно загрузить эти файлы, даже если они не принадлежат кусочке, вы можете использовать include: 'allAssets' .

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : 'allChunks' // or 'initial', or 'allAssets'
  } )
]

В случае, если вы работаете с названными кусками, вы можете явно указать, какие из них include , передавая массив:

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : [ 'home' ]
  } )
]

будет вводить только это:

 < link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " >

Фильтровать куски

Там могут быть куски, которые вы не хотите, например, предварительно загружены (например, Sourcemaps). Перед предварительной загрузкой каждой кусочки этот плагин проверяет, что файл не соответствует какую -либо повторную экспозицию в опции fileBlacklist . Значение этого черного списка по умолчанию составляет [/.map/] , что означает, что ни один из Sourcemaps не будет предварительно загружен. Вы можете легко переопределить это:

 new PreloadWebpackPlugin ( {
  fileBlacklist : [ / .whatever / ]
} )

Передача собственного массива будет переоценить по умолчанию, поэтому, если вы хотите продолжить фильтрацию Sourcemaps вместе с вашими собственными настройками, вам необходимо включить корпорацию для Sourcemaps:

 new PreloadWebpackPlugin ( {
  fileBlacklist : [ / .map / , / .whatever / ]
} )

Фильтрация HTML

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

 plugins : [
  new HtmlWebpackPlugin ( {
    filename : 'index.html' ,
    template : 'src/index.html' ,
    chunks : [ 'main' ]
  } ) ,
  new HtmlWebpackPlugin ( {
    filename : 'example.html' ,
    template : 'src/example.html' ,
    chunks : [ 'exampleEntry' ]
  } ) ,
  // Only apply the plugin to index.html, not example.html.
  new PreloadWebpackPlugin ( {
    excludeHtmlNames : [ 'example.html' ] ,
  } )

Ресурсные подсказки

Если вы хотите использовать подсказки ресурсов (например, prefetch ) вместо preload , этот плагин также поддерживает их подключение.

Предварительная перефетка:

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'prefetch'
  } )
]

Для асинхронных кусков, упомянутых ранее, плагин обновил бы ваш HTML на следующее:

 < link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " >

В том числе СМИ

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

Вы можете передать значение атрибуту СМИ в варианте media :

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    media : '(min-width: 600px)'
  } )
]

Поддерживать

Если вы нашли ошибку или столкнулись с проблемами, пожалуйста, подайте проблему.

Платы рекомендуются и могут быть представлены путем поддержания этого проекта и отправки запроса на тягу через GitHub.

Вклад рабочий процесс

src/index.js и src/lib/ содержит основной источник плагина. test/ содержит тесты.

Проверьте плагин:

$ npm install
$ npm run test

Проект написан в ES2015 и трансфиль для поддержки узла 6 и выше.

Дополнительные примечания

Будьте осторожны, чтобы не preload ресурсы, которые пользователь вряд ли понадобится. Это может тратить их пропускную способность.
Используйте preload для текущего сеанса, если вы думаете, что пользователь, вероятно, посетит следующую страницу. Не существует 100% гарантий, которые предварительно загруженные элементы в конечном итоге окажутся в кэше HTTP и прочитаны локально за пределами этой сессии.
Если оптимизировать для будущих сессий, используйте prefetch и preconnect . Предварительные ресурсы поддерживаются в кэше HTTP в течение не менее 5 минут (в Chrome), независимо от кэкрирования ресурса.

Альтернативные инструменты

Нативная поддержка Webpack: с выпуска v4.6.0 Webpack существует нативная поддержка для создания как предварительной, так и предварительной нагрузки <link> S, с помощью «Magic» комментариев в ваших операторах import() .
Script-ext-html-webpack-plugin: улучшает html-webpack-plugin , включая «Async», «defer», «Module» и «Preload». По состоянию на v1.7.0 он поддерживает асинхронные куски.
Ресурсы-Хинтс-Webpack-Plugin: автоматически проводит подсказки ресурсов для ваших ресурсов. Этот плагин в настоящее время не поддерживает асинхронные куски.

Лицензия

Лицензировано в Фонде программного обеспечения Apache (ASF) в соответствии с одним или несколькими лицензионными соглашениями. См. Файл уведомления, распространяемый с этой работой для получения дополнительной информации о владении авторским правом. ASF лицензирует этот файл вам по лицензии Apache, версия 2.0 («Лицензия»); Вы не можете использовать этот файл, кроме как в соответствии с лицензией. Вы можете получить копию лицензии на

http://www.apache.org/licenses/license-2.0

Если не требуется применимый закон или не согласен в письменной форме, программное обеспечение, распространяемое по лицензии, распределяется по основам «как есть», без каких -либо гарантий или условий, явных или подразумеваемых. См. Лицензию для конкретного языка, регулирующих разрешения и ограничения по лицензии.

Расширять

Дополнительная информация