feat: support defer load script

chenxch · May 15, 2024 · 66b951c · 66b951c
1 parent 2914708
commit 66b951c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -72,6 +72,8 @@ dynamicBase({
  publicPath: 'window.__dynamic_base__',
  // dynamic load resources on index.html, default false. maybe change default true
  transformIndexHtml: false
+ // provide conversion configuration parameters
+ // transformIndexHtmlConfig: { insertBodyAfter: false }
 })
 ```
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -71,6 +71,8 @@ dynamicBase({
  publicPath: 'window.__dynamic_base__',
  // dynamic load resources on index.html, default false. maybe change default true
  transformIndexHtml: false
+ // provide conversion configuration parameters
+ // transformIndexHtmlConfig: { insertBodyAfter: false }
 })
 ```
 
diff --git a/index.d.ts b/index.d.ts
@@ -1,6 +1,11 @@
 export interface Options {
  publicPath?: string,
  transformIndexHtml?: boolean
+ transformIndexHtmlConfig?: TransformIndexHtmlConfig
+}
+
+export interface TransformIndexHtmlConfig {
+ insertBodyAfter?: boolean,
 }
 
 export interface TransformOptions extends Options {

diff --git a/src/core/transform.ts b/src/core/transform.ts
@@ -1,4 +1,4 @@
-import type {TransformOptions} from '../../index'
+import type {TransformOptions, TransformIndexHtmlConfig} from '../../index'
 import {parse} from 'node-html-parser'
 import {replace, replaceImport, replaceInStringLiteral, replaceInTemplateElement, replaceSrc} from './utils'
 import {StringAsBytes, collectMatchingStrings, parseCode} from "./ast";
@@ -70,7 +70,7 @@ export function transformLegacyHtml(code: string, options: TransformOptions) {
  return content
 }
 
-export function transformHtml(html: string, options: TransformOptions) {
+export function transformHtml(html: string, options: TransformOptions,transformIndexHtmlConfig: TransformIndexHtmlConfig) {
  const { base, publicPath } = options
  const document = parse(html, { comment: true })
  const baseMarker = `${base}`
@@ -88,6 +88,7 @@ export function transformHtml(html: string, options: TransformOptions) {
  o.parentNode.removeChild(o)
  return result
  })
+ const endTag = transformIndexHtmlConfig?.insertBodyAfter ? '</body>' : '</head>'
  const injectCode = ` <script>
 (function(){
 var preloads = ${JSON.stringify(preloads)};
@@ -112,6 +113,9 @@ document.getElementsByTagName(item.parentTagName)[0].appendChild(childNode);
 }
 })();
 </script>
-</head>`
- return document.outerHTML.replace('</head>', injectCode)
+${endTag}
+`
+
+
+ return document.outerHTML.replace(endTag, injectCode)
 }
diff --git a/src/index.ts b/src/index.ts
@@ -5,10 +5,11 @@ import { transformChunk, transformAsset, transformLegacyHtml, transformHtml } fr
 export function dynamicBase(options?: Options): Plugin {
  const defaultOptions: Options = {
  publicPath: 'window.__dynamic_base__',
- transformIndexHtml: false // maybe default true
+ transformIndexHtml: false, // maybe default true
+ transformIndexHtmlConfig: {}
  }
 
- const { publicPath, transformIndexHtml } = { ...defaultOptions, ...(options || {}) }
+ const { publicPath, transformIndexHtml, transformIndexHtmlConfig } = { ...defaultOptions, ...(options || {}) }
 
  // const preloadHelperId = 'vite/preload-helper'
  let assetsDir = 'assets'
@@ -47,7 +48,7 @@ export function dynamicBase(options?: Options): Plugin {
  if (!chunk.fileName.endsWith('.html')) {
  chunk.source = transformAsset(chunk.source, baseOptions)
  } else if (transformIndexHtml) {
- chunk.source = transformHtml(chunk.source, baseOptions)
+ chunk.source = transformHtml(chunk.source, baseOptions, transformIndexHtmlConfig)
  if(legacy){
  chunk.source = transformLegacyHtml(chunk.source, baseOptions)
  }