webpack 静态资源内联

         一、什么是静态资源内联

二、使用

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 [email protected] -D

2.1 raw-loader 内联 html

// search.html




    ${require('raw-loader!./meta.html')} // 内联meta.html
    Document
    
    Document


    

2.2 raw-loader 内联 JS

// 若包含ES6,则先用babel-loader转换

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样例

可以看到,meta.html的文件内容,被内联进了index.html
webpack 静态资源内联_第1张图片

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

 

你可能感兴趣的:(webpack)