angular-cli下如何优化moment的大小?

[fulvaz]

angular-cli是无法使用ContextReplacementPlugin, 直接eject出来又感觉不妥.

之前重构项目研究了一下, 有以下几种办法

不需要locale

很简单, 使用moment-mini, 这是一良心人士去掉locale的版本.

需要使用locale

没有ContextReplacementPlugin只能使用很粗暴的方法

s1. 在package.json的scripts内添加这么一个命令

"postinstall": "node rm-moment-locale.js"

这条命令表示在每次安装依赖后都执行一次node rm-moment-locale.js

s2. 在项目根路径下新建一个名为rm-moment-locale.js的问题

var globby = require('globby');
var rimraf = require('rimraf');
const path = require('path');

globby([path.resolve(__dirname, '../node_modules/moment/locale/*'), `!${path.resolve(__dirname, '../node_modules/moment/locale/de-ch.js')}`,  `!${path.resolve(__dirname, '../node_modules/moment/locale/zh-cn.js')}`])
  .then(function then(paths) {
    paths.map(function map(item) {
      rimraf.sync(item);
    });
    console.log('remove redundent moment locales');
  });

代码中globby是正则匹配文件路径的工具, 比如上面的代码是保留简体中文和德语的locale.

s3. 重装一次依赖, 或者运行一次node rm-moment-locale.js

这样打包大小会下降不少.

但是作为一个有追求的程序员, 能就此止步吗? 怎么可能.

在扒了大神的源码后, 在ng-zorro中发现了端倪, ng-zorro@0.7去掉了moment依赖, 转而采取其他方法实现与moment一样的功能.

优雅地优化moment大小(还在测试中)

TL;DR: 其实是用DatePipe和date-fns取代moment

参考: ng-zorro取代moment的方案

1. 格式化日期

使用DatePipe, 用法是在constructor中注入DatePipe, 然后调用其transform方法

transform方法接受两个输入(如需要时区与locale请参考angular文档)

this.datePipe.transform(date, format);

date: 可以是字符串, 也可以是一个Date对象
format: 所需要的日期格式, 详细见https://angular.io/api/common/DatePipe

当然也可以直接使用封装好的npm包:

npm install ng-time-format --save

用法见https://github.com/fulvaz/ng-time-format

2. 操作日期

使用date-fns替代momentjs, 他们两者功能相似

对比见:
date-fns/date-fns#275

好处是: 只要使用方法恰当, 打包时, 只会打包使用到的方法, 没使用的方法不会打包.

方法恰当是指需要导入指定的包路径, 而非引入整个包

// bad
import {addDays} from 'date-fns';

// good
import * as addDays from 'date-fns/add_days';

这样打包后, 包更小.