Use more idiomatic Vue ssr setup

[yyx990803]

The Vue benchmark implementation is somewhat misrepresenting Vue's full SSR performance because the setup uses JSX and doesn't leverage the template-based compilation improvements in Vue 2.4.

This PR uses the more idiomatic *.vue files for Vue components and pre-compiles the components with webpack + vue-loader (this setup has SSR optimization enabled by default).

Updated results on my machine (2017 mbp 13', Node 8.4.0):

Warming up...

Warmup complete.

Running "search-results"...

Running benchmark "marko"...

marko x 4,458 ops/sec ±3.64% (78 runs sampled)

Running benchmark "preact"...

preact x 812 ops/sec ±1.68% (81 runs sampled)

Running benchmark "react"...

react x 35.89 ops/sec ±7.81% (48 runs sampled)

Running benchmark "vue"...

vue x 1,494 ops/sec ±4.70% (75 runs sampled)

Running benchmark "inferno"...

inferno x 548 ops/sec ±1.25% (82 runs sampled)

Fastest is marko

--------------


Warming up...

Warmup complete.

Running "color-picker"...

Running benchmark "marko"...

marko x 10,091 ops/sec ±2.15% (85 runs sampled)

Running benchmark "preact"...

preact x 4,995 ops/sec ±0.99% (88 runs sampled)

Running benchmark "react"...

react x 225 ops/sec ±3.61% (74 runs sampled)

Running benchmark "vue"...

vue x 3,292 ops/sec ±2.18% (78 runs sampled)

Running benchmark "inferno"...

inferno x 2,687 ops/sec ±1.15% (86 runs sampled)

Fastest is marko

--------------


DONE!

[ulivz]

@yyx990803 尤老师 👍

[patrick-steele-idem]

Thanks for the PR @yyx990803. I have merged in your changes and the results from running on my machine are consistent with your results:

Warming up...

Warmup complete.

Running "search-results"...

Running benchmark "marko"...

marko x 5,783 ops/sec ±1.02% (76 runs sampled)

Running benchmark "preact"...

preact x 881 ops/sec ±1.69% (90 runs sampled)

Running benchmark "react"...

react x 40.54 ops/sec ±3.26% (52 runs sampled)

Running benchmark "vue"...

vue x 1,331 ops/sec ±2.71% (76 runs sampled)

Running benchmark "inferno"...

inferno x 695 ops/sec ±1.02% (87 runs sampled)

Fastest is marko

--------------


Warming up...

Warmup complete.

Running "color-picker"...

Running benchmark "marko"...

marko x 10,997 ops/sec ±0.79% (86 runs sampled)

Running benchmark "preact"...

preact x 5,208 ops/sec ±1.24% (89 runs sampled)

Running benchmark "react"...

react x 217 ops/sec ±3.31% (74 runs sampled)

Running benchmark "vue"...

vue x 3,384 ops/sec ±2.22% (73 runs sampled)

Running benchmark "inferno"...

inferno x 4,078 ops/sec ±0.75% (90 runs sampled)

Fastest is marko

--------------

DONE!

NOTE: I have also merged the Inferno PR and am now using the latest versions of all packages.

In case you were curious, I used .jsx instead of .vue because at the time it felt like a pain to get .vue files working on the server and it felt wrong to have to use Webpack to create a server-side bundle. I get why you do this and I'm definitely good with your changes, but just wanted to provide some feedback in case you were wondering why I went with .jsx. Personally, I am adverse to requiring a build step for running code under Node.js. Do you offer a Node.js require hook for on-the-fly compilation and loading of .vue files?

I will be updating benchmark results provided in this repo, but it's going to take some time because I have to manually run the benchmarks on all devices (which means I need to get ahold of an Android phone).

[yyx990803]

Most serious Vue applications are built with webpack + vue files, so I'm using that to provide the closest-to-production results. If for simplicity's sake, you can actually just inline the template as JavaScript strings instead of using JSX since vue-server-renderer supports on the fly compilation.

[patrick-steele-idem]

Thanks for the details.

If for simplicity's sake, you can actually just inline the template as JavaScript strings instead of using JSX since vue-server-renderer supports on the fly compilation.

JavaScript strings would be a worse developer experience and it would result in compilation happening in the browser so I'll stick with your changes to introduce Webpack.