优化HMR #7

Merged
yutent merged 1 commits from dev into master 2023-06-26 16:40:43 +08:00
4 changed files with 22 additions and 21 deletions

View File

@ -408,22 +408,16 @@ function render(_ctx, _cache) {
/**
* 解析模板html
*/
export function parseHtml(
html,
{ page, imports, entry, LEGACY_MODE, session }
) {
export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) {
return html
.replace(/\r\n/g, '\n')
.replace(
'</head>',
`${
process.env.NODE_ENV === 'development'
? ` <script>${Es.transformSync(
createHmrScript(LEGACY_MODE, session),
{
? ` <script>${Es.transformSync(createHmrScript(LEGACY_MODE), {
minify: true
}
).code.trim()}</script>\n`
}).code.trim()}</script>\n`
: ''
}</head>`
)

View File

@ -7,7 +7,7 @@ import socket from './ws.js'
import chokidar from 'chokidar'
import { red } from 'kolorist'
import { friendlyErrors, defaultCustomElement, md5, gzip } from './utils.js'
import { friendlyErrors, defaultCustomElement, gzip } from './utils.js'
import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
@ -183,8 +183,7 @@ export default async function createServer(root = '', conf = {}) {
page,
imports: conf.imports,
entry,
LEGACY_MODE,
session: md5(page.entry)
LEGACY_MODE
})
}

View File

@ -39,7 +39,7 @@ export function friendlyErrors(pathname, ext = '') {
export function createHmrScript(legacy, session = '') {
return `
!(function vue_live_hmr(){
var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-fite-hmr?session=${session}\`)
var ws = new WebSocket(\`ws\${location.protocol === 'https:' ? 's' : ''}://\${location.host}/ws-fite-hmr?session=\${btoa(location.pathname).replace(/[=\+\/]/g, '')}&lock=\${localStorage.getItem(location.pathname) || 0}\`)
ws.addEventListener('open', function (r) {
if(vue_live_hmr.closed){
@ -51,6 +51,9 @@ export function createHmrScript(legacy, session = '') {
ws.addEventListener('close', function(){
vue_live_hmr.closed = true
if (localStorage.getItem(location.pathname) === '1') {
return
}
setTimeout(vue_live_hmr, 2000)
})

View File

@ -15,7 +15,11 @@ class WebSocket {
conn.on('connection', (client, req) => {
let params = new URLSearchParams(req.url.slice(req.url.indexOf('?')))
let session = params.get('session')
let lock = +params.get('lock')
if (lock === 1) {
client.close()
} else {
this.#clients.set(session, client)
client.once('close', _ => {
@ -26,6 +30,7 @@ class WebSocket {
let msg = this.#queue.shift()
this.send(msg)
}
}
})
}
}