Webpack 资源内联 如何内联js库、CSS、图片、字体等

 

关于资源内联

代码层面:

  • 页面框架的初始化脚本 如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标签合并成一个
    }
}
posted @   IslandZzzz  阅读(447)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
历史上的今天：
2019-09-24 7 JavaScript函数调用&this关键字&全局对象&函数调用&闭包
2019-09-24 6 JavaScript函数&内置构造&函数提升&函数对象&箭头函数&函数参数&参数的值传递与对象传递
2019-09-24 5 JSON&与JavaScript转换&JavaScript:void(0)&JavaScript代码规范
点击右上角即可分享
微信分享提示
SQL AI 助手