日期-fns 2-不能让树震动工作

Question

我很难弄清楚日期-fns v.2树的功能是如何工作的.

为了帮助我，我做了一个非常简单的项目，使用：

• date-fns 2.1.0
• webpack 4.39.3
• typescript 3.6.2

测试包含两个文件，一个充当“库”，另一个充当要运行的代码，它非常简单，就像.

import ParseDate from './parse-date'

const parse = new ParseDate();
const result = parse.getExpirationDate({ months: 3 });

console.log(result);

但问题是，尽管我只要求使用6个库来使用震撼树的方法。

import { addYears, addMonths, addWeeks, addDays, addHours, addMinutes } from 'date-fns';

从他们的文档

// Without tree-shaking:
import format from 'date-fns/format'
import parse from 'date-fns/parse'

// With tree-shaking:
import { format, parse } from 'date-fns'

webpack正在捆绑整个约会-fns库，作为两个文件的结果，726 of !！

> npm run build

> date_fns_test@1.0.0 build C:\Users\balexandre\date_fns_test
> tsc && webpack

Hash: 419a712549fc2309f21e
Version: webpack 4.39.3
Time: 820ms
Built at: 2019-09-09 17:27:36
    Asset     Size  Chunks             Chunk Names
bundle.js  726 KiB    main  [emitted]  main
Entrypoint main = bundle.js
chunk {main} bundle.js (main) 441 KiB [entry] [rendered]
    > ./src/index.js main
 [./src/index.js] 410 bytes {main} [depth 0] [built]
     single entry ./src/index.js  main
 [./src/parse-date.js] 1.27 KiB {main} [depth 1] [built]
     cjs require ./parse-date [./src/index.js] 6:35-58
     + 212 hidden modules

我错过了什么？ ...must是一件很简单的事情，但我的想法已经用完了

该项目可以是在GitHub上发现，以便于评审(以及git ) :)

Answer 1

要使树摇动工作，您必须配置TypeScript来编译ES模块而不是CommonJS，并在webpack中启用生产模式：

• 在tsconfig.json集中module: 'es2015'
• 在webpack.config.js集中mode: 'production'

通过这个设置，您将只需要1Kb构建：

$ size-limit dist/bundle.js 

  Package size: 724 B
  With all dependencies, minified and gzipped

这是你回购的补丁：

diff --git a/tsconfig.json b/tsconfig.json
index 42d6d90..b64255d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
       /* Basic Options */
-      "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+      "target": "es2015",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
       "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
       // "lib": [],                             /* Specify library files to be included in the compilation. */
        "allowJs": false,                        /* Allow javascript files to be compiled. */
diff --git a/webpack.config.js b/webpack.config.js
index 8ccbc94..1419137 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');

 const config = {
   entry: './src/index.js',
-  mode: 'development',
+  mode: 'production',
   stats: 'verbose',
   output: {
       path: path.resolve(__dirname, 'dist'),

Answer 2

下面是一个用于树抖动的修正-fns函数，它为我工作，使用Webpack别名(最初提到了在“吉特布”的公开发行中)。

我从解决方案使摇树为当地服务中导出了解决方案。

1. 创建一个名为date-fns-functions.js的文件，例如，在webpack配置旁边，您将重新导出您在项目中使用的函数，如下所示：

export { default as parseISO } from 'date-fns/parseISO';
export { default as formatDistanceToNow } from 'date-fns/formatDistanceToNow';
export { default as parse } from 'date-fns/parse';
...

1. 然后，添加一个别名Webpack配置：

    resolve: {
        alias: {
            'date-fns$': require.resolve('./date-fns-functions.js')
        }
    },

在我的特殊情况下，使用Nuxt.js进行Webpack捆绑时，我在nuxt.config.js中添加了以下内容：

extend (config, ctx) {
   config.resolve.alias['date-fns$'] = require.resolve('./date-fns-functions.js');
   ...
}

每次从date-fns导入东西时，它都会使用别名查找导入，从而避免整个库的完整导入。

这解决了我的问题，大大减少了捆绑的规模。