date-fns 2 - 无法让树摇动工作

2024-01-19

我不知道如何date-fns https://github.com/date-fns/date-fnsv.2 树摇动功能有效...

为了帮助我,我使用以下方法制作了一个非常简单的项目:

  • date-fns 2.1.0
  • webpack 4.39.3
  • typescript 3.6.2

该测试包含 2 个文件,一个充当“库”,另一个充当要运行的代码,就像......

import ParseDate from './parse-date'

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

console.log(result);

但问题是,虽然我只要求使用 tree-shaking 使用 6 个库

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

从他们的docs https://github.com/date-fns/date-fns/blob/master/CHANGELOG.md:

// 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 正在捆绑整个 date-fns 库,这是两个文件的结果,726Kb !!

> npm run build

> [email protected] /cdn-cgi/l/email-protection 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

我缺少什么?...一定是一件简单的事情,但我已经没有想法了:(

该项目可以是在 GitHub 上找到的 https://github.com/balexandre/parse-fns-treeshaking为了方便审查(和 git pull):)


为了使 tree-shaking 工作,你必须配置 TypeScript 编译为 ES 模块而不是 CommonJS,并在 webpack 中启用生产模式:

  • In tsconfig.json set module: 'es2015'
  • In webpack.config.js set 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'),
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

date-fns 2 - 无法让树摇动工作 的相关文章

随机推荐