https://github.com/jin5354/prefetch-polyfill-webpack-plugin

Prefetch polyfill plugin for webpack async chunks to imporve load time (on safari)
https://github.com/jin5354/prefetch-polyfill-webpack-plugin

Last synced: 3 months ago
JSON representation

Prefetch polyfill plugin for webpack async chunks to imporve load time (on safari)

• Host: GitHub
• URL: https://github.com/jin5354/prefetch-polyfill-webpack-plugin
• Owner: jin5354
• License: mit
• Created: 2017-09-22T08:23:39.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-09T07:49:58.000Z (about 7 years ago)
• Last Synced: 2024-07-18T16:26:38.082Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 77.1 KB
• Stars: 46
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# prefetch-polyfill-webpack-plugin

[![Build Status](https://travis-ci.org/jin5354/prefetch-polyfill-webpack-plugin.svg?branch=master)](https://travis-ci.org/jin5354/prefetch-polyfill-webpack-plugin)

[![Coverage Status](https://coveralls.io/repos/github/jin5354/prefetch-polyfill-webpack-plugin/badge.svg?branch=master)](https://coveralls.io/github/jin5354/prefetch-polyfill-webpack-plugin?branch=master)

[![npm package](https://img.shields.io/npm/v/prefetch-polyfill-webpack-plugin.svg)](https://www.npmjs.org/package/prefetch-polyfill-webpack-plugin)

[![npm downloads](https://img.shields.io/npm/dt/prefetch-polyfill-webpack-plugin.svg)](https://www.npmjs.org/package/prefetch-polyfill-webpack-plugin)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

## Intro

This plugin automatically wire up your async thunks with a prefetch polyfill function(using new Image().src or ``) for platform which doesn't support `<link rel='prefetch'>`, such as safari, to improve load time.

This is an extension plugin for [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).

The prefetch polyfill function will be injected before `</body>`.

```html

<!-- as default it use new Image().src -->

<script>

  (function(){

    var ua = (typeof navigator !== 'undefined' ? navigator.userAgent || '' : '')

    if(/safari|iphone|ipad|ipod|msie|trident/i.test(ua) && !/chrome|crios|crmo|firefox|iceweasel|fxios|edge/i.test(ua)) {

      window.onload = function () {

        var i = 0, length = 0,

          preloadJs = ['/chunk.a839f9eac501a92482ca.js', ...your thunks]

        for (i = 0, length = preloadJs.length; i < length; i++) {

          new Image().src = preloadJs[i]

        }

      }

    }

  })()

(function(){

  var ua = (typeof navigator !== 'undefined' ? navigator.userAgent || '' : '')

  if(/safari|iphone|ipad|ipod|msie|trident/i.test(ua) && !/chrome|crios|crmo|firefox|iceweasel|fxios|edge/i.test(ua)) {

    window.onload = function () {

      var i = 0, length = 0, js,

        preloadJs = ['/chunk.a839f9eac501a92482ca.js', ...your thunks]

      for (i = 0, length = preloadJs.length; i < length; i++) {

        js = document.createElement('script')

        js.src = preloadJs[i]

        js.async = true

        document.body.appendChild(js)

      }

    }

  }

})()

```

![example](https://user-images.githubusercontent.com/6868950/30850447-30b6856a-a26b-11e7-812a-9e85e9e4aebe.jpeg)

## Install

```bash

npm install prefetch-polyfill-webpack-plugin --save-dev

```

## Usage

In webpack config, require the plugin:

```javascript

const PrefetchPolyfillPlugin = require('prefetch-polyfill-webpack-plugin');

```

and add this plugin after HtmlWebpackPlugin:

```javascript

plugins: [

  new HtmlWebpackPlugin(),

  new PrefetchPolyfillPlugin()

]

```

This plugin works well with [preload-webpack-plugin](https://github.com/GoogleChrome/preload-webpack-plugin). If you are using code splitting you are recommended to use both plugin at the same time.

## options

### mode

Set mode to `async` to use `` to prefetch, or use `new Image().src` as default.

```javascript

plugins: [

  new HtmlWebpackPlugin(),

  new PrefetchPolyfillPlugin({

    mode: 'async'

  })

]

```

## Acknowledgment

[preload-webpack-plugin](https://github.com/GoogleChrome/preload-webpack-plugin)

## LICENSE

MIT