Webpack-assets-preload NPM

webpack-assets-preload 资源文件预加载

Installation

yarn add webpack-assets-preload --dev

npm i webpack-assets-preload -D

Usage

Configuration

// webpack.config.js
const webpackPreload = require('webpack-assets-preload');

module.exports = {
  plugins: [
    new webpackPreload({
      time: 4000, // 延迟时间，默认4000
    }),
  ]
}

Html before:

<html>
  <head>
    <title>example</title>
    <script type=text/javascript src="/static/js/vendor-59615c78f7be.js" ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Html after:

<html>
  <head>
    <title>example</title>
    <script type=text/javascript src="/static/js/vendor-59615c78f7be.js" ></script>
    <script type=text/javascript>
        setTimeout(() => {
            var assetList = ["/static/js/0.d1354848e1b0426622aa.js", "/static/js/4.74cd1a1c7f1b520b04de.js", "/static/js/20.03832a2af7fb7ada6b96.js"];
              assetList.forEach(item => {
                if (/\.css$/.test(item)) {
                  var linkNode = document.createElement('link');
                  linkNode.href = item;
                  linkNode.setAttribute('rel', 'stylesheet');
                  linkNode.setAttribute('type', 'text/css');
                  headNode.appendChild(linkNode)
                } else if (/\.js$/.test(item)) {
                  var scNode = document.createElement('script');
                  scNode.src = item;
                  scNode.async = true;
                  scNode.defer = true;
                  scNode.setAttribute('charset', 'utf-8');
                  headNode.appendChild(scNode)
                }
              })
        }, 4000)
      let headNode = document.querySelector('head');
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

webpack preload plugin assets

@everything-registry/sub-chunk-3129

1.0.0

8 months ago