[英]date-fns 2 - can't get tree-shaking to work
I'm having trouble figuring how date-fns v.2 tree-shaking feature works...我无法弄清楚date-fns v.2 tree-shaking 功能是如何工作的......
To help me with it, I've made a really simple project using:为了帮助我,我使用以下方法制作了一个非常简单的项目:
date-fns 2.1.0
webpack 4.39.3
typescript 3.6.2
the test contains 2 files, one acting as the "library", the other acting as the code to run, and it is as simple as...测试包含 2 个文件,一个充当“库”,另一个充当要运行的代码,它就像......
import ParseDate from './parse-date'
const parse = new ParseDate();
const result = parse.getExpirationDate({ months: 3 });
console.log(result);
but the issue is, though I'm only asking to work with 6 libraries using the tree-shaking use但问题是,虽然我只要求使用 tree-shaking 使用 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 is bundling the entire date-fns library, being the result of the 2 files, 726Kb !! webpack 捆绑了整个 date-fns 库,是 2 个文件的结果, 726Kb !!
> 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
What am I missing?我错过了什么? ...must be a simple thing but I've run out of ideas:(
...一定是一件简单的事情,但我的想法已经用完了:(
The project can be found on GitHub for easy review (and git pull):)该项目可以在 GitHub上找到,以便于审查(和 git 拉):)
To make tree-shaking work you have to configure TypeScript to compile to ES Modules instead of CommonJS and also enable production mode in webpack:要使 tree-shaking 工作,您必须配置 TypeScript 以编译为 ES 模块而不是 CommonJS,并在 webpack 中启用生产模式:
tsconfig.json
set module: 'es2015'
tsconfig.json
设置module: 'es2015'
webpack.config.js
set mode: 'production'
webpack.config.js
设置mode: 'production'
With this setup you'll have just 1Kb build:使用此设置,您将只有 1Kb 构建:
$ size-limit dist/bundle.js
Package size: 724 B
With all dependencies, minified and gzipped
Here's a patch for your repo:这是您的回购的补丁:
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'),
Here is a fix for tree-shaking the date-fns functions that worked for me, using a Webpack alias (initially mentioned in the opened Github issue )这是对我有用的 date-fns 函数的 tree-shaking 修复,使用 Webpack 别名(最初在打开的 Github 问题中提到)
I derived the solution from the solution to make tree-shaking work for locales .我从locales 的 tree-shaking work的解决方案中导出了解决方案。
date-fns-functions.js
next to your webpack config where you will re-export the functions you use in your project like this:date-fns-functions.js
的文件,您将在其中重新导出您在项目中使用的函数,如下所示:export { default as parseISO } from 'date-fns/parseISO';
export { default as formatDistanceToNow } from 'date-fns/formatDistanceToNow';
export { default as parse } from 'date-fns/parse';
...
resolve: {
alias: {
'date-fns$': require.resolve('./date-fns-functions.js')
}
},
In my particular case, using Nuxt.js for Webpack bundling I added this in nuxt.config.js instead:在我的特殊情况下,使用 Nuxt.js 进行 Webpack 捆绑,我在 nuxt.config.js 中添加了它:
extend (config, ctx) {
config.resolve.alias['date-fns$'] = require.resolve('./date-fns-functions.js');
...
}
Every time you import something from date-fns
it will look up the import using the alias, avoiding the full import of the entire library.每次从
date-fns
导入内容时,它都会使用别名查找导入,避免完全导入整个库。
This solved the problem for me and greatly reduced the bundle size.这解决了我的问题并大大减少了包的大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.