html_webpack_plugin_alter_asset_mount-stzhang

微调 html-webpack-plugin 插件注入 script 标签在html模板内的位置

1.0.2
Source
npm

Version published: 4 years ago

Weekly downloads: 1; decreased by-50%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

html_webpack_plugin_alter_asset_mount-stzhang

避免将单页应用程序SPA中所有脚本的<script>标签都一股脑地都放在<body>底部或<head>标签内。

所有<script>标签都放在<head>标签里会延长首页白屏时间。
所有<script>标签都放在<body>底部也会延后一部分视觉敏感程序的初始化时间点。举例来讲，在px2rem尺寸计算方案中，
1. 我们就期望：把计算与设置<html>标签font-size样式属性值的时间点放在开始渲染<body>标签内容之前，以避免内容大小的缩放闪烁。
2. 甚至，若能做到“把程序代码至少分成两部分，一部分在<body>渲染前执行以为px2rem做环境准备，另一部分在<body>后执行以缩短首页白屏时间”就更完美了。

此webpack插件就是为了这个目标而生。

工作原理

必须与html-webpack-plugin插件配套使用。
读取html-webpack-plugin插件的配置项。
1. html_webpack_plugin_alter_asset_mount-stzhang给html-webpack-plugin插件添加了一个新配置项mount（这是一个选项对象）。
2. html_webpack_plugin_alter_asset_mount-stzhang自身的构造函数也接受包含了mount配置项的配置对象。但是，它的优先级更低会被html-webpack-plugin插件配置项对象内的mount复写（不是合并）。
监听html-webpack-plugin插件的html-webpack-plugin-alter-asset-tags插件事件。正是在这个事件的处理函数里：
1. 使用给html-webpack-plugin插件新增的配置项mount。
2. 修改chunk脚本文件在html页中的注入位置。

用法

必须与html-webpack-plugin插件配套使用

此插件在`webpack.plugins`插件数组内出现的位置不影响功能的正常运行

html_webpack_plugin_alter_asset_mount-stzhang插件被罗列在html-webpack-plugin插件前/后都能正常地工作。

配置项`mount`在`html-webpack-plugin`插件的构造函数参数里

mount配置项会由html_webpack_plugin_alter_asset_mount-stzhang插件解析与使用。它的格式：

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'tmpl/index.html',
    inject: true,
    chunks: ['chunkId1', 'chunkId2'],
    mount: { // 新配置项在这里。
        chunkId1: { // chunk 名 或者 chunk id
            js: 'body' | 'head',  // 指定此 chunk 的脚本文件放在哪
            css: 'body' | 'head'  // 指定此 chunk 的样式文件放在哪
        }
        // 注意：chunkId2 没有出现在 mount 配置里。所以，`inject: true`
        // 让把它的程序文件放在哪，就放在那。和`HtmlWebpackPlugin`插件
        // 的原有行为保持一致。
    }
})

`chunkId`的数据格式

**在HtmlWebpackPlugin v4+中，**其的格式是{Chunk Id hint}~{Entry Point 1}~{Entry Point 2}~...

安装

npm i -D html_webpack_plugin_alter_asset_mount-stzhang

const AlertAssetMount = require('html_webpack_plugin_alter_asset_mount-stzhang');
module.exports = {
    // ...
    plugins: [
        new AlertAssetMount() // 上面配置中的 {mount: {chunkId1: {js, css}}} 配置对象
                              // 出现在构造函数参数里也是可以的。但，注意优先级更低
    ]
    // ...
};

Keywords

FAQs

What is html_webpack_plugin_alter_asset_mount-stzhang?

Is html_webpack_plugin_alter_asset_mount-stzhang popular?

Is html_webpack_plugin_alter_asset_mount-stzhang well maintained?

Package last updated on 03 Jan 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install