fix: same link

jianxing-xu · May 22, 2024 · cfdfcaf · cfdfcaf
1 parent 035eb4d
commit cfdfcaf
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 35 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
-  <div id="app"></div>
-  <a href="/__inspect/#/module?id=./main.ts&index=2" target="_blank" style="text-decoration: none; margin-top:10px; display: block;">visit /__inspect/ to inspect the intermediate state</a>
-  <script type="module" src="./main.ts"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <a
+      href="/__inspect/#/module?id=./main.ts&index=2"
+      target="_blank"
+      style="text-decoration: none; margin-top: 10px; display: block"
+      >visit /__inspect/ to inspect the intermediate state</a
+    >
+    <script type="module" src="./main.ts"></script>
+  </body>
 </html>
diff --git a/playground/package.json b/playground/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "dev": "nodemon -w '../src/**/*.ts' -e .ts -x vite",
-    "build:webpack": "webpack --watch --config webpack.config.js",
+    "build:webpack": "webpack --config webpack.config.js",
     "build:vite": "vite build"
   },
   "dependencies": {
@@ -12,7 +12,8 @@
     "babel-loader": "^9.1.3",
     "html-webpack-plugin": "^5.6.0",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "unplugin-prefetch-dns": "^0.1.3"
   },
   "devDependencies": {
     "vite": "^5.0.4",

diff --git a/playground/webpack.config.js b/playground/webpack.config.js
@@ -3,7 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const DnsPrefetchPlugin = require('../dist/webpack.cjs').default
 
 module.exports = {
-  mode: 'production',
+  mode: 'development',
   entry: './main.ts',
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -16,18 +16,14 @@ module.exports = {
         include: path.resolve(__dirname),
         exclude: /node_modules/i,
         loader: require.resolve('babel-loader'),
-        // options: {
-        //   presets: [],
-        //   babelrc: false,
-        //   configFile: false,
-        //   cacheDirectory: true,
-        //   cacheCompression: false,
-        // },
       },
     ],
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
   },
-  plugins: [DnsPrefetchPlugin(), new HtmlWebpackPlugin({})],
+  plugins: [
+    new HtmlWebpackPlugin({}),
+    DnsPrefetchPlugin(),
+  ],
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -5,14 +5,17 @@ import urlRegex from 'url-regex'
 import type { Compiler } from 'webpack'
 import type { Options } from './types'
 
-const PLUGIN_NAME = 'unplugin-dns-prefetch:webpack'
+const PLUGIN_NAME = 'unplugin-prefetch-dns:webpack'
+
+const URL_REG = /https:\/\/[^/]*/i
 
 export const unpluginFactory: UnpluginFactory<Options | undefined> = () => {
   const htmlTemplatePaths = [] as string[][]
   const urls = new Set<string>()
-  const URL_REG = /https:\/\/[^/]*/i
 
   function process(dir: string, filePaths: string[]) {
+    htmlTemplatePaths.length = 0
+    urls.clear()
     return Promise.all(filePaths.map(async (fileName) => {
       const content = await fs.readFile(`${dir}/${fileName}`, 'utf-8')
 
@@ -29,21 +32,28 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = () => {
         if (matched)
           urls.add(matched[0])
       })
-
+    })).then(() => {
+      // insert url
       if (urls.size === 0)
         return
-
-      // insert url
-      const links = [...urls].map(url => `<link rel="dns-prefetch" href="${url}">`).join('\n  ')
+      let links = [...urls].map(url => `<link rel="dns-prefetch" href="${url}">`)
       for (const [path, content] of htmlTemplatePaths) {
-        const newHTML = content.replace(/(<head[^>]*>)/, (_, head) => `${head}\n  ${links}`)
-        await fs.writeFile(path, newHTML, 'utf-8')
+        const headS = content.indexOf('<head>')
+        const headE = content.indexOf('</head>')
+        const headStr = content.slice(headS - 1, headE + 1)
+        links = links.filter((link) => {
+          return !headStr.includes(link)
+        })
+        if (!links.length)
+          return
+        const newHTML = content.replace(/(<head[^>]*>)/, (_, head) => `${head}\n  ${links.join('\n ')}`)
+        fs.writeFile(path, newHTML, 'utf-8')
       }
-    }))
+    })
   }
 
   return {
-    name: 'unplugin-prefetch-dns',
+    name: PLUGIN_NAME,
     enforce: 'post',
     vite: {
       writeBundle: {
@@ -55,10 +65,10 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = () => {
       },
     },
     webpack(compiler: Compiler) {
-      compiler.hooks.done.tapAsync({ name: PLUGIN_NAME }, async (stats) => {
-        const path = stats.compilation.outputOptions.path
-        const fileNames = stats.compilation.assetsInfo.keys()
-        await process(path!, [...fileNames])
+      compiler.hooks.afterEmit.tapAsync({ name: PLUGIN_NAME }, async (stats) => {
+        const path = stats.outputOptions.path
+        const fileNames = stats.assetsInfo.keys()
+        process(path!, [...fileNames])
       })
     },
   }