本文Demo的完整工程代码, 参考alternative-moment
目录
开始
dva new alternative-moment
npm run build
File sizes after gzip:
88.61 KB dist/index.js
316 B dist/index.css
moment
cnpm i --save moment
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import moment from 'moment';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
{moment().format('MMMM Do YYYY, h:mm:ss a')}
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome} />
<ul className={styles.list}>
<li>To get started, edit <code>src/index.js</code> and save to reload.</li>
<li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
153.22 KB dist/index.js
316 B dist/index.css
date-fns
cnpm i --save date-fns
cnpm i --save-dev babel-plugin-date-fns
vim .roadhogrc
{
"entry": "src/index.js",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
"date-fns"
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
"date-fns"
]
}
}
}
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import { format } from 'date-fns';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
{format(new Date(), 'MMMM Do YYYY, h:mm:ss a')}
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome} />
<ul className={styles.list}>
<li>To get started, edit <code>src/index.js</code> and save to reload.</li>
<li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
91.46 KB dist/index.js
316 B dist/index.css
关于date-fns详细介绍 参考web优化 之 模块化引入
fecha
cnpm i --save fecha
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import fecha from 'fecha';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
{fecha.format(new Date(), 'MMMM Do YYYY, h:mm:ss a')}
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome} />
<ul className={styles.list}>
<li>To get started, edit <code>src/index.js</code> and save to reload.</li>
<li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
90.33 KB dist/index.js
316 B dist/index.css
spacetime
cnpm i --save spacetime
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import spacetime from 'spacetime';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
{spacetime.now().format('full')}
<h1 className={styles.title}>Yay! Welcome to dva!</h1>
<div className={styles.welcome} />
<ul className={styles.list}>
<li>To get started, edit <code>src/index.js</code> and save to reload.</li>
<li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
100.08 KB dist/index.js
316 B dist/index.css
小结
| 包大小(KB) | 评价 | |
|---|---|---|
| dva | 88.61 | N/A |
| dva+moment | 153.22 | ★★★★ |
| dva+date-fns | 91.46 | ★★★★★ |
| dva+fecha | 90.33 | ★★★ |
| dva+spacetime | 100.08 | ★★ |
说明: (1) date-fns基于模块化引入 (2) 包大小是指gzip压缩后
参考
更多文章, 请支持我的个人博客
