The /^<!--/ regExp causes bug when injecting js to html

[mengjian-github]

Version

undefined

Reproduction link

https://jsfiddle.net/xjtumj/u04ornp4/

Steps to reproduce

when injecting vue to html, there is nothing to show in android webview.

try to replace /^<!--/ with /^<!\--/, the showing turns to be right.

suggest to escape the expression.

What is expected?

render correctly

What is actually happening?

not render correctly

[posva]

try to replace /^<!--/ with /^<!--/,

What's the difference?
Please provide a valid repro when reporting a bug

[mengjian-github]

@posva sorry for ignoring github editor's self encoding, I updated my written with '\' instead of ''

[posva]

Why would - need to be escaped out of []. Could you provide the repro, please?

[mengjian-github]

@posva because <!-- will be parsed to a comment tag in html files. When injecting code into a <script> tag, we would found nothing to be rendered in Android Webview.
I'm sorry that I couldn't provide a real repro because it's a private project. I have not found a simple way to reproduce yet. But it is really useful to replace <!-- with <!\--, it will not be treated as a comment tag that prevent the code execution after.

[posva]

ah, I see, so it's a repro after all. What version and what browser are failing? The change is minimal but I want to make sure there's actually a problem

[mengjian-github]

vue version: 2.5.2
android system version: 4.4.2

[yyx990803]

This is weird, as it should not happen unless you are inlining the entire Vue codebase inside HTML. Why would you do that?

[mengjian-github]

This is an optimization strategy for hybrid web page. There are a wide range of Android device used by our users, and most of them are lower-end, which means very low performance and network speed. For those who use these devices, the WebView native cache is not reliable, most of the time would be wasted on network requests. We found that injecting js/css files into html can effectively improve the speed when open pages, as it really reduce the RTT(Round-Trip Time) in weak-network environment. Also, we have offline packages which are supported by native app, this would be really fast that native app could prefetch html and cache them. In most circumstances, the page is loaded locally.

Without the SSR(need more machine and labor costs), it would be a good practice to inject js and css files into html, to get the significant performance optimization for most users who use the lower-end phone with weak-network environment.