archive-gh-me/marko
1
0
Fork 0
mirror of https://github.com/marko-js/marko.git synced 2025-12-08 19:26:05 +00:00
Code Issues Projects Releases Wiki Activity

Added benchmark/size

Browse Source
This commit is contained in:
Patrick Steele-Idem 2016-12-15 16:57:52 -07:00
parent 5dc913841d
commit 9700bbfd9a
13 changed files with 316 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
benchmark/size/.babelrc Normal file
View File

@ -0,0 +1,4 @@
{
"presets": ["react"],
"plugins": ["transform-react-constant-elements"]
}

2
benchmark/size/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/build/
/node_modules/

11
benchmark/size/marko.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Marko</title>
</head>
<body>
<h1>Marko</h1>
<script src="./build/bundles.min/marko.js"></script>
</body>
</html>

6
benchmark/size/marko/client.js Normal file
View File

@ -0,0 +1,6 @@
var app = require('./components/app');
app.renderSync({
name: 'Frank',
colors: ['red', 'green', 'blue']
})
.appendTo(document.body);

26
benchmark/size/marko/components/app/index.marko Normal file
View File

@ -0,0 +1,26 @@
<script>
module.exports = {
onInput: function(input) {
this.state = {
name: input.name,
colors: input.colors,
clickCount: 0
};
},
handleButtonClick: function() {
this.state.clickCount++;
}
};
</script>
div
h1 - Hello ${state.name}!
div.colors
ul if(state.colors.length)
for(color in state.colors)
li.color style="background-color: ${color}"
- ${color}
div else
- No colors!
button type="button" onClick('handleButtonClick')
- You clicked the button ${state.clickCount} time(s)

90
benchmark/size/minify.js Normal file
View File

@ -0,0 +1,90 @@
console.log('Minifying JavaScript bundles...');
const fs = require('fs');
const path = require('path');
const zlib = require('zlib');
const gcc = require('google-closure-compiler-js');
const formatNumber = require('format-number')();
var buildDir = path.join(__dirname, 'build');
var bundlesDir = path.join(__dirname, 'build/bundles');
var bundlesMinDir = path.join(__dirname, 'build/bundles.min');
try {
fs.mkdirSync(bundlesMinDir);
} catch(e) {}
var promiseChain = Promise.resolve();
function getVersion(name) {
return require(name + '/package.json').version;
}
function leftPad(str, padding) {
if (str.length < padding) {
str = new Array(padding - str.length).join(' ') + str;
}
return str;
}
var bundleFiles = fs.readdirSync(bundlesDir);
bundleFiles.forEach((filename) => {
if (!filename.endsWith('.js')) {
return;
}
var file = path.join(bundlesDir, filename);
var src = fs.readFileSync(file, { encoding: 'utf8' });
const options = {
jsCode: [{src: src}],
};
const out = gcc.compile(options);
var ext = path.extname(filename);
var nameNoExt = filename.slice(0, 0-ext.length);
var minifiedSrc = out.compiledCode;
var minFile = path.join(bundlesMinDir, filename);
fs.writeFileSync(minFile, minifiedSrc, { encoding: 'utf8' });
promiseChain = promiseChain.then(() => {
return new Promise((resolve, reject) => {
zlib.gzip(minifiedSrc, function(err, gzippedBuffer) {
if (err) {
return reject(err);
}
// Compare the sizes
var minifiedBuffer = new Buffer(minifiedSrc, 'utf8');
// console.log(nodePath.basename(templateInfo.outputCompileMinifiedFile) + ': ' + gzippedBuffer.length + ' bytes gzipped (' + minifiedBuffer.length + ' bytes uncompressed)');
var sizeInfo = {
gzipped: gzippedBuffer.length,
min: minifiedBuffer.length
};
var libVersion = getVersion(nameNoExt);
var sizeFilename = nameNoExt + (libVersion ? '-' + libVersion : '') + '.json';
fs.writeFileSync(path.join(buildDir, sizeFilename), JSON.stringify(sizeInfo, null, 4), { encoding: 'utf8' });
console.log('[' + nameNoExt + ']');
console.log(' gzip: ' + leftPad(formatNumber(sizeInfo.gzipped), 8) + ' bytes');
console.log(' min: ' + leftPad(formatNumber(sizeInfo.min), 8) + ' bytes');
resolve();
});
});
});
});
promiseChain.then(() => {
console.log('Minification complete.');
})

36
benchmark/size/package.json Normal file
View File

@ -0,0 +1,36 @@
{
"name": "size-benchmark",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"setup": "npm install --silent && npm link ../../",
"build": "npm run setup && npm run bundle --silent && npm run minify --silent",
"bundle": "mkdir -p build/bundles && npm run bundle-marko --silent && npm run bundle-react --silent",
"bundle-marko": "NODE_ENV=production browserify -t envify -t markoify --extension='.marko' -o build/bundles/marko.js marko/client.js",
"bundle-react": "NODE_ENV=production browserify -t envify -t babelify --extension='.jsx' -o build/bundles/react.js react/client.jsx",
"bundle-vue": "NODE_ENV=production browserify -t envify -t vueify --extension='.vue' -o build/bundles/vue.js vue/client.js",
"minify": "node minify.js",
"http-server": "http-server"
},
"author": "Patrick Steele-Idem <pnidem@gmail.com>",
"license": "MIT",
"dependencies": {
"babel-plugin-transform-react-constant-elements": "^6.9.1",
"babel-preset-react": "^6.16.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"envify": "^4.0.0",
"format-number": "^2.0.1",
"google-closure-compiler-js": "^20161201.0.0",
"http-server": "^0.9.0",
"markoify": "^2.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"vue": "^2.1.6"
},
"repository": {
"type": "git",
"url": "https://github.com/marko-js/marko.git"
}
}

11
benchmark/size/react.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<h1>React</h1>
<script src="./build/bundles.min/react.js"></script>
</body>
</html>

8
benchmark/size/react/client.jsx Normal file
View File

@ -0,0 +1,8 @@
var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App');
ReactDOM.render(
<App name='Frank' colors={['red', 'green', 'blue']}/>,
document.body);

56
benchmark/size/react/components/App/index.jsx Normal file
View File

@ -0,0 +1,56 @@
'use strict';
var React = require('react');
function renderColor(color) {
var style = {
backgroundColor: color
};
return <li className="color" style={style}>
{color}
</li>
}
function renderColors(colors) {
if (colors.length) {
return (<ul>{colors.map(renderColor)}</ul>);
} else {
return <div>No colors!</div>
}
}
module.exports = class extends React.Component {
constructor(props) {
super(props);
this.state = {
name: props.name,
colors: props.colors,
clickCount: 0
}
this.handleButtonClick = function() {
this.setState({
clickCount: this.state.clickCount + 1
});
}.bind(this);
}
render() {
var colors = this.state.colors;
var name = this.state.name;
var clickCount = this.state.clickCount;
var handleButtonClick = this.handleButtonClick;
return (
<div>
<h1>Hello {name}!</h1>
<div className="colors">
{renderColors(colors)}
</div>
<button type="button" onClick={handleButtonClick}>
You clicked the button {clickCount} time(s)
</button>
</div>
);
}
};

11
benchmark/size/vue.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<h1>Vue</h1>
<script src="./build/bundles.min/vue.js"></script>
</body>
</html>

17
benchmark/size/vue/client.js Normal file
View File

@ -0,0 +1,17 @@
var Vue = require('vue');
var App = require('./components/App');
// var app = new App({
// el: document.body,
// data: {
// name: 'Frank',
// colors: ['red', 'green', 'blue']
// }
// });
new Vue({
el: document.body,
render: function (createElement) {
return createElement(App);
}
});

38
benchmark/size/vue/components/App/index.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div>
<h1>
Hello {{name}}!
</h1>
<div class="colors">
<ul v-if="colors.length">
<li v-for="color in colors" class="color" v-bind:style="'background-color: ' + color">
{{color}}
</li>
</ul>
<div v-else>
No colors!
</div>
</div>
<button type="button" v-on:click="clickCount += 1">
You clicked the button {{clickCount}} time(s)
</button>
</div>
</template>
<script>
module.exports = {
data() {
return {
clickCount: 0,
name: 'Frank',
colors: ['red', 'green', 'blue']
}
},
methods: {
handleButtonClick: function() {
this.clickCount++;
}
}
}
</script>