webpack 静态资源内联

迈不过友情╰ 2023-06-25 13:30 16阅读 0赞

一、什么是静态资源内联

二、使用

2.1 raw-loader 内联 html

2.2 raw-loader 内联 JS

2.3 html-inline-css-webpack-plugin  实现CSS内联

三、现象

--------------------

## 一、什么是静态资源内联 ##

静态资源内联，即将css、js、图片等资源，内联到html。我们可以通过静态资源内联来减少文件请求数量，优化加载速度

**代码层面:**

*  页面框架的初始化脚本，如rem换算等
 *  上报相关打点
 *  css 内联避免页面闪动

**请求层面：减少 http 网络请求数**

*  小图片或字体内联(url-loader)

## 二、使用 ##

// 需要使用0.5.1版本
    npm i raw-loader@0.5.1 -D

### **2.1 raw-loader 内联 html** ###

// search.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ${require('raw-loader!./meta.html')} // 内联meta.html
        <title>Document</title>
        <script>${require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js')}</script>
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="./search.js"></script>
    </body>
    </html>

### 2.2 **raw-loader 内联 JS** ###

// 若包含ES6，则先用babel-loader转换
    <script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>

### 2.3 html-inline-css-webpack-plugin  实现CSS内联 ###

// CSS内联
    npm i html-inline-css-webpack-plugin -D

// webpack.prod.js
    
    module.exports = { 
        plugins: [ 
            ...,
            new HTMLInlineCSSWebpackPlugin()
        ],
    }

## 三、现象 ##

github项目地址： [webpack样例][webpack]

可以看到，meta.html的文件内容，被内联进了index.html  
![20191229145300766.png][]

js文件中的内容，也被内联进了index.html

![20191229145448524.png][]

[webpack]: https://github.com/IDIDIDchen/webpack_demo
[20191229145300766.png]: https://img-blog.csdnimg.cn/20191229145300766.png
[20191229145448524.png]: https://img-blog.csdnimg.cn/20191229145448524.png