首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >为什么Webpack 5包括我未使用的TypeScript枚举出口,即使树摇动是启用的?

为什么Webpack 5包括我未使用的TypeScript枚举出口,即使树摇动是启用的?
EN

Stack Overflow用户
提问于 2021-08-10 03:44:25
回答 1查看 2.4K关注 0票数 3

我的TypeScript枚举定义如下,如本文件所示

代码语言:javascript
复制
export enum HueColors {
  "red"    = "hsl(0, 100%, 50%)",
  "orange" = "hsl(30, 100%, 50%)",
  // ...
  "pink"   = "hsl(330, 100%, 50%)",
}

export enum RGBExtended { /* ... */ }
export enum WebSafe { /* ... */ }

安装/控制

代码语言:javascript
复制
// package.json
{
  ...
  "main": "./index.js",
  "types": "./index.d.ts",
  "files": [
    "**/*.{js,ts, map}"
  ],
  "sideEffects": false,
  "scripts": {
    ...
    "build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js",
    ...
  },
  "babel": {
    "extends": "./config/.babelrc.json"
  },
  ...
  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "@types/jest": "^26.0.24",
    "@types/node": "^16.4.0",
    "@typescript-eslint/eslint-plugin": "^4.28.4",
    "@typescript-eslint/parser": "^4.28.4",
    "copy-webpack-plugin": "^9.0.1",
    "cross-env": "^7.0.3",
    "eslint": "^7.31.0",
    "eslint-plugin-jest": "^24.4.0",
    "jest": "^27.0.6",
    "prettier": "^2.3.2",
    "terser-webpack-plugin": "^5.1.4",
    "ts-jest": "^27.0.4",
    "ts-loader": "^9.2.4",
    "ts-node": "^10.1.0",
    "typedoc": "^0.21.4",
    "typescript": "^4.3.5",
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2"
  }
}
代码语言:javascript
复制
// config/.babelrc.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        },
        "modules": false
      }
    ]
  ]
}
代码语言:javascript
复制
// config/tsconfig.json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "lib": ["DOM", "DOM.Iterable", "ES2017"],
    "moduleResolution": "node", 
    "outDir": "../dist", 
    "noEmit": false,
    "declaration": true, 
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["../src"],
  "exclude": ["../node_modules", "../tests", "../coverage", "../src/debug.ts"]
}
代码语言:javascript
复制
// config/webpack.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const CopyPlugin = require("copy-webpack-plugin");

const path = require("path");

const basePath = path.resolve(__dirname, "../");

module.exports = {
  entry: path.join(basePath, "src", "index.ts"),
  mode: process.env.NODE_ENV,
  devtool: process.env.NODE_ENV === "production" ? "source-map" : false,
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: {
          configFile: path.join(__dirname, "tsconfig.json")
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        ... // not important for question
      ]
    })
  ],
  optimization: {
    minimize: process.env.NODE_ENV === "production",
    minimizer: [
      (compiler) => {
        const TerserPlugin = require("terser-webpack-plugin");
        new TerserPlugin({
          terserOptions: {
            ecma: 5,
            mangle: true,
            module: false
          }
        }).apply(compiler);
      }
    ],
    usedExports: true,
    sideEffects: true,
    innerGraph: true
  },
  stats: {
    usedExports: true,
    providedExports: true,
    env: true
  },
  resolve: {
    extensions: [".ts"]
  },
  output: {
    filename: "index.js",
    path: path.join(basePath, "dist"),
    library: "colormaster",
    libraryTarget: "umd",
    globalObject: "this",
    clean: true
  }
};

开发生成输出

我在控制台中看到了以下内容:

代码语言:javascript
复制
...
./src/enums/colors.ts 17.6 KiB [built] [code generated]
    [exports: HueColors, RGBExtended, WebSafe]
    [only some exports used: HueColors] // ← indicates that tree shaking should occur in production build
webpack 5.46.0 compiled successfully in 2368 ms

我在生成的dist文件夹输出中看到了以下内容:

代码语言:javascript
复制
// dist/index.js → mode === development 

/***/ "./src/enums/colors.ts":
/*!*****************************!*\
  !*** ./src/enums/colors.ts ***!
  \*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "HueColors": () => (/* binding */ HueColors)
/* harmony export */ });
/* unused harmony exports RGBExtended, WebSafe */ // ← indicates that tree shaking should occur in production
var HueColors;
(function (HueColors) {
    HueColors["red"] = "hsl(0, 100%, 50%)";
    ...
    HueColors["pink"] = "hsl(330, 100%, 50%)";
})(HueColors || (HueColors = {}));
var RGBExtended;
(function (RGBExtended) {
    RGBExtended["maroon"] = "rgb(128,0,0)";
    ...
    RGBExtended["white"] = "rgb(255,255,255)";
})(RGBExtended || (RGBExtended = {}));
var WebSafe;
(function (WebSafe) {
    WebSafe["#000000"] = "rgb(0,0,0)";
    ...
    WebSafe["#FFFFFF"] = "rgb(255,255,255)"; 
})(WebSafe || (WebSafe = {}));

生产建设产出

但是,在生产生成输出中,我看到以下内容:

显然还包括未使用的出口。

可以做些什么来规避这个问题?

解决方案

多亏了杰夫·鲍曼的广泛回应,我们才能推断出,根本原因是TypeScript将enum编译成一个生命。

简单地将enum变量替换为const (记录实用程序)解决了这个问题,在生产包中可以看到树的抖动。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68720866

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档