为了使 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'),