优化HMR
parent
ce34b01f68
commit
0a05548c15
|
@ -408,22 +408,16 @@ function render(_ctx, _cache) {
|
||||||
/**
|
/**
|
||||||
* 解析模板html
|
* 解析模板html
|
||||||
*/
|
*/
|
||||||
export function parseHtml(
|
export function parseHtml(html, { page, imports, entry, LEGACY_MODE }) {
|
||||||
html,
|
|
||||||
{ page, imports, entry, LEGACY_MODE, session }
|
|
||||||
) {
|
|
||||||
return html
|
return html
|
||||||
.replace(/\r\n/g, '\n')
|
.replace(/\r\n/g, '\n')
|
||||||
.replace(
|
.replace(
|
||||||
'</head>',
|
'</head>',
|
||||||
`${
|
`${
|
||||||
process.env.NODE_ENV === 'development'
|
process.env.NODE_ENV === 'development'
|
||||||
? ` <script>${Es.transformSync(
|
? ` <script>${Es.transformSync(createHmrScript(LEGACY_MODE), {
|
||||||
createHmrScript(LEGACY_MODE, session),
|
minify: true
|
||||||
{
|
}).code.trim()}</script>\n`
|
||||||
minify: true
|
|
||||||
}
|
|
||||||
).code.trim()}</script>\n`
|
|
||||||
: ''
|
: ''
|
||||||
}</head>`
|
}</head>`
|
||||||
)
|
)
|
||||||
|
|
|
@ -7,7 +7,7 @@ import socket from './ws.js'
|
||||||
import chokidar from 'chokidar'
|
import chokidar from 'chokidar'
|
||||||
import { red } from 'kolorist'
|
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'
|
import { compileScss, parseJs, compileVue, parseHtml } from './compile-vue.js'
|
||||||
|
|
||||||
|
@ -183,8 +183,7 @@ export default async function createServer(root = '', conf = {}) {
|
||||||
page,
|
page,
|
||||||
imports: conf.imports,
|
imports: conf.imports,
|
||||||
entry,
|
entry,
|
||||||
LEGACY_MODE,
|
LEGACY_MODE
|
||||||
session: md5(page.entry)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -39,7 +39,7 @@ export function friendlyErrors(pathname, ext = '') {
|
||||||
export function createHmrScript(legacy, session = '') {
|
export function createHmrScript(legacy, session = '') {
|
||||||
return `
|
return `
|
||||||
!(function vue_live_hmr(){
|
!(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) {
|
ws.addEventListener('open', function (r) {
|
||||||
if(vue_live_hmr.closed){
|
if(vue_live_hmr.closed){
|
||||||
|
@ -51,6 +51,9 @@ export function createHmrScript(legacy, session = '') {
|
||||||
|
|
||||||
ws.addEventListener('close', function(){
|
ws.addEventListener('close', function(){
|
||||||
vue_live_hmr.closed = true
|
vue_live_hmr.closed = true
|
||||||
|
if (localStorage.getItem(location.pathname) === '1') {
|
||||||
|
return
|
||||||
|
}
|
||||||
setTimeout(vue_live_hmr, 2000)
|
setTimeout(vue_live_hmr, 2000)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
19
lib/ws.js
19
lib/ws.js
|
@ -15,16 +15,21 @@ class WebSocket {
|
||||||
conn.on('connection', (client, req) => {
|
conn.on('connection', (client, req) => {
|
||||||
let params = new URLSearchParams(req.url.slice(req.url.indexOf('?')))
|
let params = new URLSearchParams(req.url.slice(req.url.indexOf('?')))
|
||||||
let session = params.get('session')
|
let session = params.get('session')
|
||||||
|
let lock = +params.get('lock')
|
||||||
|
|
||||||
this.#clients.set(session, client)
|
if (lock === 1) {
|
||||||
|
client.close()
|
||||||
|
} else {
|
||||||
|
this.#clients.set(session, client)
|
||||||
|
|
||||||
client.once('close', _ => {
|
client.once('close', _ => {
|
||||||
this.#clients.delete(session)
|
this.#clients.delete(session)
|
||||||
})
|
})
|
||||||
|
|
||||||
while (this.#queue.length) {
|
while (this.#queue.length) {
|
||||||
let msg = this.#queue.shift()
|
let msg = this.#queue.shift()
|
||||||
this.send(msg)
|
this.send(msg)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue