본문 데모의 완전한 프로젝트 코드,alternative-moment 참조

카탈로그

시작

moment

date-fns

fecha

spacetime

소결

개시하다

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 (
    

      {moment().format('MMMM Do YYYY, h:mm:ss a')}
      
Yay! Welcome to dva!
      

      

        
To get started, edit src/index.js and save to reload.
        
Getting Started
      
    
  );
}

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 (
    

      {format(new Date(), 'MMMM Do YYYY, h:mm:ss a')}
      
Yay! Welcome to dva!
      

      

        
To get started, edit src/index.js and save to reload.
        
Getting Started
      
    
  );
}

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에 대한 상세한 소개 웹 최적화의 모듈화 도입 참고

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 (
    

      {fecha.format(new Date(), 'MMMM Do YYYY, h:mm:ss a')}
      
Yay! Welcome to dva!
      

      

        
To get started, edit src/index.js and save to reload.
        
Getting Started
      
    
  );
}

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 (
    

      {spacetime.now().format('full')}
      
Yay! Welcome to dva!
      

      

        
To get started, edit src/index.js and save to reload.
        
Getting Started
      
    
  );
}

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 압축 후

참고 자료

Webpack 패키지 최적화 볼륨 편

Modularize moment.js, make the core as light as possible

how-to-optimize-momentjs-with-webpack

momentjs docs

Moment.js중문망

date-fns docs

date-fns 경량급 자바스크립트 날짜 라이브러리

spacetime

fecha

더 많은 글, 나의 개인 블로그를 지지해 주십시오