2
  • 操作系统：

MacOS Catalina 10.15.6

  • 节点版本：

v12.18.3

  • NPM 版本：

6.14.7

  • 网络包版本：

4.44.1

  • terser-webpack-plugin 版本：

3.1.0

预期行为

使用 TypeScript（刚刚在现有的 React 项目中配置），我希望 TerserPlugin 的子依赖“jest-worker@26.3.0”不会破坏路由的代码拆分。

实际行为

按路由进行代码拆分（在 TypeScript 配置之前工作正常，但使用 TerserPlugin），它只是不再为路由创建块。它只发生在生产中。Bundle.js 变得更大，并且没有路由块（0.bundle.js、1.bundle.js 等）

代码拆分通过文档https://reactjs.org/docs/code-splitting.html#code-splitting使用 Suspense/lazy 。

代码

webpack.mode-production.js：

optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          parallel: true, // false tried too
          extractComments: false,
          sourceMap: false,
          terserOptions: {
            output: {
              comments: false,            },
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    },

这是 iTerm 输出“$ npx webpack --mode=production”

npx webpack

webpack is watching the files…

(node:12883) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Hash: 6933e17ca16f76021b02
Version: webpack 4.44.1
Time: 28424ms
Built at: 2020-08-14 11:37:38
 13 assets
Entrypoint main = bundle.js (prefetch: 12.bundle.js 3.bundle.js 0.bundle.js 1.bundle.js 2.bundle.js 4.bundle.js 5.bundle.js 6.bundle.js 7.bundle.js 8.bundle.js 9.bundle.js 10.bundle.js)
  [4] (webpack)/buildin/harmony-module.js 573 bytes {11} [built]
  [8] ./src/contexts/theme.jsx 3.07 KiB {11} [built]
  [9] ./src/helpers/index.js 1.1 KiB {11} [built]
 [17] ./node_modules/.pnpm/react-redux@7.2.1_49f644e2f7de4182503f8b93abece808/node_modules/react-redux/es/index.js + 22 modules 49.9 KiB {11} [built]
      |    23 modules
 [18] ./src/App/images/index.js 1.71 KiB {11} [built]
 [55] ./src/constants.js 5.51 KiB {11} [built]
 [60] ./src/App/App.scss 833 bytes {11} [built]
 [62] ./src/redux/reducers/index.js 1.23 KiB {11} [built]
[187] ./src/redux/store.js 3.47 KiB {11} [built]
[203] ./src/App/index.jsx 13.4 KiB {11} [built]
[207] ./src/redux/reducers/qSelections.js 2.05 KiB {11} [built]
[324] ./src/getAppHelpers.js 12.9 KiB {11} [built]
[487] multi react-hot-loader/patch ./src/index.jsx 40 bytes {11} [built]
[491] ./src/index.jsx 5.22 KiB {11} [built]
[498] ./src/styles/index.scss 748 bytes {11} [built]
    + 1437 hidden modules

ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js
[tsl] ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js(55,7)
      TS2578: Unused '@ts-expect-error' directive.

ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js
[tsl] ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js(145,7)
      TS2578: Unused '@ts-expect-error' directive.

ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js
[tsl] ERROR in /Users/a17748207/code/strategy-dashboard/node_modules/.pnpm/jest-worker@26.3.0/node_modules/jest-worker/build/index.js(171,9)
      TS2578: Unused '@ts-expect-error' directive.

在“webpack --mode=development”中，iTerm 中存在相同的错误，但会创建路由块。仅在 prod 模式下出现问题。

我们如何繁殖？

  • 如上所述配置 TerserPlugin。
  • 配置代码拆分 Suspense/lazy，生成路由块（0.bundle.js 等），就像在 React 文档中一样：
// https://reactjs.org/docs/code-splitting.html#route-based-code-splitting
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);
  • 配置 TypeScript：

包.json：

"devDependencies": {
...
    "@types/classnames": "^2.2.10",
    "@types/lodash": "^4.14.159",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "terser-webpack-plugin": "^3.0.2",
    "ts-loader": "^8.0.2",
    "typescript": "^3.9.7",
...
  }

tsconfig.json：

{
  "compilerOptions": {
    "outDir": "build",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "src/**/*.js",
    "src/**/*.jsx" // In project only one component converted to TypeScript for now, and it has .tsx extension.
  ]
}

我测试了删除 TerserPlugin 的案例（删除了整个 webpack.optimization 部分）和 TypeScript，然后代码拆分工作正常。我还没有找到任何可以解决问题的 TypeScript 配置（消除 iTerm 中的错误，并修复代码拆分）。

也许有一些解决方法，或者我错过了什么？

提前致谢。

4

0 回答 0