本文Demo的完整工程代碼, 參考import-as-required-antd / import-as-required-lodash / import-as-required-date-fns
目錄
antd
開始
dva new import-as-required-antd
npm run build
File sizes after gzip:
88.61 KB dist/index.js
316 B dist/index.css
全部引入
cnpm i --save antd
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import { Button } from 'antd';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
<Button>Antd Button</Button>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
397.95 KB dist/index.js
316 B dist/index.css
模塊化引入
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import Button from 'antd/lib/button';
import 'antd/lib/button/style';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
<Button>Antd Button</Button>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
90.51 KB dist/index.js
10.1 KB dist/index.css
優化
npm i babel-plugin-import --save-dev
vim .roadhogrc
{
"entry": "src/index.js",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
["import", { "libraryName": "antd", "style": "css" }]
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd", "style": "css" }]
]
}
}
}
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import { Button } from 'antd';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
<Button>Antd Button</Button>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
90.51 KB dist/index.js
10.1 KB dist/index.css
關于babel-plugin-import詳細介紹 參考ant-design/babel-plugin-import
lodash
開始
dva new import-as-required-lodash
npm run build
File sizes after gzip:
88.61 KB dist/index.js
316 B dist/index.css
全部引入
cnpm i --save lodash
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import styles from './IndexPage.css';
function IndexPage() {
const r = _.indexOf(['hello', 'world'], hello);
console.log('lodash: ', r);
return (
<div className={styles.normal}>
<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 >Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
112.62 KB dist/index.js
316 B dist/index.css
模塊化引入
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import array from 'lodash/array';
import styles from './IndexPage.css';
function IndexPage() {
const r = array.indexOf(['hello', 'world'], 'hello');
console.log('lodash: ', r);
return (
<div className={styles.normal}>
<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 >Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
99.57 KB dist/index.js
316 B dist/index.css
優化
cnpm i --save-dev babel-plugin-lodash
vim .roadhogrc
{
"entry": "src/index.js",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
"lodash"
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
"lodash"
]
}
}
}
npm run build
File sizes after gzip:
89.41 KB dist/index.js
316 B dist/index.css
date-fns
開始
dva new import-as-required-date-fns
npm run build
File sizes after gzip:
88.61 KB dist/index.js
316 B dist/index.css
全部引入
cnpm i --save 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(2017, 6, 6), 'MM/DD/YYYY')}
<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 >Getting Started</a></li>
</ul>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
npm run build
File sizes after gzip:
96.04 KB dist/index.js
316 B dist/index.css
模塊化引入
vim src/routes/IndexPage.js
import React from 'react';
import { connect } from 'dva';
import format from 'date-fns/format';
import styles from './IndexPage.css';
function IndexPage() {
return (
<div className={styles.normal}>
{format(new Date(2017, 6, 6), 'MM/DD/YYYY')}
<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 >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
優化
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"
]
}
}
}
npm run build
File sizes after gzip:
91.46 KB dist/index.js
316 B dist/index.css
參考
更多文章, 請支持我的個人博客
