关于资源内联
代码层面:
- 页面框架的初始化脚本 如flexible
- 上报相关打点 css、js的初始化以及加载完成的上报点的代码需要内联到html里面去
- css内联避免页面闪动 首屏一般会内联css,避免页面闪动(代码层面的体验，初始化的内容)
请求层面 减少http请求
- 小图片或者字体内联(url-loader)
raw-loader内联html和js
raw-loader原理是返回一个string插入到html
npm i raw-loader@0.5.1 -D
内联html
手机端开发的时候有大段meta信息，这个时候每个页面都是需要的，我们可以把meta片段拆出来
通过raw-loader内联进来
webpack默认使用EJS模板引擎,可以通过$符号引入
$(require('raw-loader!./meta.html'))
内联js
将lib-flexible内联进来，可能需要先加上babel-loader
raw-loader 源码只有十几行，使用的时候
<!-- 当前目录相对于node_modules的路径 -->
${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}
整体示例
<!DOCTYPE html>
<html lang="en">
<head>
${require('raw-loader!./meta.html')}
<title>Document</title>
<script>
${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')};
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
css内联
有两种方案
- style-loader
- html-inline-css-webpack-plugin 更广泛
对于style-loader
{
loader:'style-loader',
options:{
insertAt:'top', // 放在head标签里
singleton:true // 所有的style标签合并成一个
}
}