prefetch-polyfill-webpack-plugin
prefetch-polyfill-webpack-plugin
Last updated 2 years ago by jin5354 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install prefetch-polyfill-webpack-plugin 
SYNC missed versions from official npm registry.

prefetch-polyfill-webpack-plugin

Build Status Coverage Status npm package npm downloads License: MIT

Intro

This plugin automatically wire up your async thunks with a prefetch polyfill function(using new Image().src or <script async>) 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.

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

<!-- 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]
        }
      }
    }
  })()
</script>

<!-- you can choose to use <script async> -->
<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, 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)
      }
    }
  }
})()
</script>

example

Install

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

Usage

In webpack config, require the plugin:

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

and add this plugin after HtmlWebpackPlugin:

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

This plugin works well with 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 <script async> to prefetch, or use new Image().src as default.

plugins: [
  new HtmlWebpackPlugin(),
  new PrefetchPolyfillPlugin({
    mode: 'async'
  })
]

Acknowledgment

preload-webpack-plugin

LICENSE

MIT

Current Tags

  • 0.2.0                                ...           latest (2 years ago)

7 Versions

  • 0.2.0                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 8
Last Day 0
Last Week 0
Last Month 3
Dependencies (0)
None
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |