Open hubvue opened 5 years ago
代码层面
请求层面
由于html-webpack-plugin指定的template可以使用ejs的语法编译,所以可以结合raw-loader使用内联loader的方式将外部代码内联进来
html-webpack-plugin
如果我们的一个html文件中引入了很多的meta标签信息,以及多个cdn链接,可以采取将meta信息和cdn链接分别抽离成meta.html和cdn.html,在index.html中使用raw-loader将这两个html内联进来。如果项目是多页的话,更新变化只需要更新这两个html文件即可。
meta.html
cdn.html
<!-- meta.html--> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- cdn.html--> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
在index.html中引入
<!DOCTYPE html> <html lang="en"> <head> ${ require('raw-loader!./meta.html')} <title>Document</title> ${ require('raw-loader!./cdn.html')} </head> <!-- dsfsdfsdfss --> <body></body> </html>
raw-loader也可以内联js代码,例如内联一个第三方公共包
<!DOCTYPE html> <html lang="en"> <head> ${ require('raw-loader!./meta.html')} <title>Document</title> ${ require('raw-loader!./cdn.html')} <script>${require('raw-loader!babel-loader!../node_nodules/lodash/index.js')}</script> </head> <!-- dsfsdfsdfss --> <body></body> </html>
上面以lodash做一个例子,这样就可以把js代码内联进来了。
html-inline-css-webpack-plugin
yarn add html-inline-css-webpack-plugin -D
module.exports = { plugins: [ new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }), new HtmlWebpackPlugin(), new HTMLInlineCSSWebpackPlugin({ filter(fileName) { return fileName.includes('main'); }, }), ], module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ] } ] } }
将打包好的js代码内联进html,目前市面上的这种插件有一些缺陷:1、效果不明显;2、信任度不高。所以可以自研插件,其原理就是挂载html-webpack-plugin中提供给我们使用的钩子,得到html文件对应注入的chunk,找到特定chunk将其内容注入到html中就可以了。
资源内联的意义
代码层面
请求层面
内联方案
raw-loader
由于
html-webpack-plugin
指定的template可以使用ejs的语法编译,所以可以结合raw-loader使用内联loader的方式将外部代码内联进来内联HTML
如果我们的一个html文件中引入了很多的meta标签信息,以及多个cdn链接,可以采取将meta信息和cdn链接分别抽离成
meta.html
和cdn.html
,在index.html中使用raw-loader将这两个html内联进来。如果项目是多页的话,更新变化只需要更新这两个html文件即可。在index.html中引入
内联JavaScript
raw-loader也可以内联js代码,例如内联一个第三方公共包
上面以lodash做一个例子,这样就可以把js代码内联进来了。
CSS文件的内联
html-inline-css-webpack-plugin
将打包好的css文件插入到html代码的head标签内。内联JavaScript chunk
将打包好的js代码内联进html,目前市面上的这种插件有一些缺陷:1、效果不明显;2、信任度不高。所以可以自研插件,其原理就是挂载html-webpack-plugin中提供给我们使用的钩子,得到html文件对应注入的chunk,找到特定chunk将其内容注入到html中就可以了。