webpack-assets-preload
v1.0.0
Published
资源文件预加载
Downloads
4
Readme
webpack-assets-preload 资源文件预加载
Installation
yarn add webpack-assets-preload --dev
or
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>