Skip to content

Commit 3be3fb5

Browse files
author
Guillaume Chau
committed
feat: initial sources
1 parent 9e61bc2 commit 3be3fb5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+261988
-128
lines changed

‎.eslintrc.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
module.exports = {
22
root: true,
33
env: {
4-
node: true
4+
node: true,
55
},
66
'extends': [
77
'plugin:vue/essential',
8-
'@vue/standard'
8+
'@vue/standard',
99
],
1010
rules: {
1111
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12-
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13+
'comma-dangle': ['error', 'always-multiline'],
1314
},
1415
parserOptions: {
15-
parser: 'babel-eslint'
16-
}
16+
parser: 'babel-eslint',
17+
},
1718
}

‎babel.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
presets: [
3-
'@vue/app'
4-
]
3+
'@vue/app',
4+
],
55
}

‎generate.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const { writeFileSync } = require('fs')
2+
const faker = require('faker')
3+
const CliProgress = require('cli-progress')
4+
5+
const bar = new CliProgress.Bar({}, CliProgress.Presets.shades_classic)
6+
7+
const count = 4000
8+
9+
bar.start(count, 0)
10+
11+
const items = []
12+
for (let i = 0; i < count; i++) {
13+
const posts = []
14+
for (let p = 0; p < 10; p++) {
15+
posts.push(faker.lorem.paragraphs())
16+
}
17+
items.push(Object.assign(
18+
{},
19+
faker.helpers.createCard(),
20+
{
21+
avatar: faker.image.avatar(),
22+
posts,
23+
},
24+
))
25+
bar.update(i + 1)
26+
}
27+
28+
writeFileSync('./src/items.json', JSON.stringify(items, null, 2), {
29+
encoding: 'utf8',
30+
})
31+
32+
bar.stop()

‎package.json

+10-1
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,18 @@
55
"scripts": {
66
"serve": "vue-cli-service serve",
77
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
8+
"lint": "vue-cli-service lint",
9+
"start": "serve ./dist -s"
910
},
1011
"dependencies": {
12+
"@vue/ui": "^0.5.6",
13+
"faker": "^4.1.0",
14+
"fps-indicator": "^1.3.0",
15+
"lodash.clone": "^4.5.0",
16+
"particles.js": "^2.0.0",
1117
"vue": "^2.6.6",
1218
"vue-router": "^3.0.1",
19+
"vue-virtual-scroller": "^1.0.0-rc.2",
1320
"vuex": "^3.0.1"
1421
},
1522
"devDependencies": {
@@ -18,8 +25,10 @@
1825
"@vue/cli-service": "^3.5.0",
1926
"@vue/eslint-config-standard": "^4.0.0",
2027
"babel-eslint": "^10.0.1",
28+
"cli-progress": "^2.1.1",
2129
"eslint": "^5.8.0",
2230
"eslint-plugin-vue": "^5.0.0",
31+
"serve": "^10.1.2",
2332
"stylus": "^0.54.5",
2433
"stylus-loader": "^3.0.2",
2534
"vue-template-compiler": "^2.5.21"

‎postcss.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
plugins: {
3-
autoprefixer: {}
4-
}
3+
autoprefixer: {},
4+
},
55
}

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title>vueconfus-perf-secrets</title>
99
</head>
10-
<body>
10+
<body class="vue-ui-dark-mode">
1111
<noscript>
1212
<strong>We're sorry but vueconfus-perf-secrets doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1313
</noscript>

‎src/App.vue

+29-12
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,42 @@
11
<template>
22
<div id="app">
33
<div id="nav">
4-
<router-link to="/">Home</router-link> |
5-
<router-link to="/about">About</router-link>
4+
<router-link to="/" exact>Home</router-link>
5+
<!-- Omitted, not enough performance gains in this example -->
6+
<!-- Need to find/write a better benchmark for this -->
7+
<!-- <router-link :to="{ name: 'bench-static' }">Static</router-link> -->
8+
<router-link :to="{ name: 'bench-child' }">Child splitting</router-link>
9+
<router-link :to="{ name: 'bench-local-var' }">Local var</router-link>
10+
<router-link :to="{ name: 'bench-functional' }">Functional components</router-link>
11+
<router-link :to="{ name: 'bench-hide' }">Reused Dom</router-link>
12+
<router-link :to="{ name: 'bench-keep-alive' }">Keep alive</router-link>
13+
<router-link :to="{ name: 'bench-deferred' }">Deferred features</router-link>
14+
<router-link :to="{ name: 'bench-fetch-items' }">Fetch items</router-link>
615
</div>
7-
<router-view/>
16+
<router-view class="route"/>
817
</div>
918
</template>
19+
1020
<style lang="stylus">
21+
html,
22+
body,
23+
#app
24+
height: 100%
25+
1126
#app
12-
font-family 'Avenir', Helvetica, Arial, sans-serif
13-
-webkit-font-smoothing antialiased
14-
-moz-osx-font-smoothing grayscale
15-
text-align center
16-
color #2c3e50
27+
display flex
28+
flex-direction column
1729
1830
#nav
19-
padding 30px
31+
padding 15px 30px
32+
flex auto 0 0
33+
background #2c3e50
2034
a
2135
font-weight bold
22-
color #2c3e50
23-
&.router-link-exact-active
24-
color #42b983
36+
margin-right 24px
37+
&.router-link-active
38+
color white
39+
40+
.route
41+
flex 1
2542
</style>

‎src/components/Benchmark.vue

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="benchmark">
3+
<div class="toolbar">
4+
<div class="title">{{ title }}</div>
5+
<VueGroup v-model="optimizationEnabled">
6+
<VueGroupButton :value="false">Unoptimized</VueGroupButton>
7+
<VueGroupButton class="primary" icon-left="done" :value="true">
8+
{{ optimizedLabel || 'Optimized' }}
9+
</VueGroupButton>
10+
</VueGroup>
11+
<slot name="toolbar"/>
12+
</div>
13+
14+
<div class="content">
15+
<slot v-if="optimizationEnabled" name="on"/>
16+
<slot v-else name="off"/>
17+
<slot/>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
props: {
25+
title: String,
26+
optimizedLabel: String,
27+
},
28+
29+
data () {
30+
return {
31+
optimizationEnabled: false,
32+
}
33+
},
34+
}
35+
</script>
36+
37+
<style lang="stylus" scoped>
38+
.benchmark
39+
display flex
40+
flex-direction column
41+
42+
.toolbar
43+
flex auto 0 0
44+
display flex
45+
align-items center
46+
padding 15px 30px
47+
> *:not(:last-child)
48+
margin-right 12px
49+
50+
.title
51+
font-size 32px
52+
font-weight lighter
53+
flex 1
54+
white-space nowrap
55+
overflow hidden
56+
text-overflow ellipsis
57+
58+
.content
59+
flex 1
60+
background black
61+
</style>

‎src/components/HeavyComponent.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div
3+
class="heavy"
4+
:style="{
5+
fontSize: `${20 + n / 9999999 * 20}px`,
6+
}"
7+
>
8+
<pre>{{ heavy() }} <span>(n: {{ n }})</span></pre>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: {
15+
n: {
16+
default: 1000000,
17+
},
18+
},
19+
methods: {
20+
heavy () {
21+
const n = this.n
22+
let result = 0
23+
for (let i = 0; i < n; i++) {
24+
result += Math.sqrt(Math.cos(Math.sin(Math.random() * 100)))
25+
}
26+
return result
27+
},
28+
},
29+
}
30+
</script>
31+
32+
<style lang="stylus" scoped>
33+
.heavy
34+
>>>
35+
pre
36+
margin 0
37+
span
38+
opacity .75
39+
</style>

‎src/components/HelloWorld.vue

-57
This file was deleted.

‎src/components/Home.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="home">
3+
<img class="logo" alt="Vue logo" src="../assets/logo.png">
4+
</div>
5+
</template>
6+
7+
<style lang="stylus" scoped>
8+
.home
9+
text-align center
10+
display flex
11+
align-items center
12+
justify-content center
13+
14+
.logo
15+
filter drop-shadow(0 0 30px rgba(white, .3)) drop-shadow(0 0 60px rgba(white, .4))
16+
</style>

‎src/components/PlayToggle.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<VueButton v-if="value" class="danger play-toggle" icon-left="stop" @click="$emit('input', false)">Stop</VueButton>
3+
<VueButton v-else class="primary play-toggle" icon-left="play_arrow" @click="$emit('input', true)">Play</VueButton>
4+
</template>
5+
6+
<script>
7+
export default {
8+
props: {
9+
value: Boolean,
10+
},
11+
}
12+
</script>
13+
14+
<style lang="stylus" scoped>
15+
.play-toggle
16+
width 100px
17+
</style>

0 commit comments

Comments
 (0)