Блог

• Операционная система:

macOS Catalina 10.15.6

• Версия узла:

версия 12.18.3

• Версия NPM:

6.14.7

• версия webpack:

4.44.1

• версия terser-webpack-plugin:

3.1.0

Ожидаемое поведение

С TypeScript (только что настроенным в существующем React-project) я ожидал, что зависимость TerserPlugin от зависимостей «jest-worker@26.3.0 «не нарушило бы разделение кода по маршрутам.

Фактическое поведение

Разделение кода по маршрутам (которое отлично работало до настройки TypeScript, но с TerserPlugin), — оно просто больше не создает фрагменты для маршрутов. Это происходит только в рабочей среде. Bundle.js становится больше, и фрагменты маршрута отсутствуют (0.bundle.js, 1.bundle.js и т.д.)

Разделение кода использует приостановку / lazy по документации https://reactjs.org/docs/code-splitting.html#code-splitting .

Код

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.
  

In «webpack —mode=development» there are the same erorrs in iTerm, but route-chunks get created. Problem only in prod mode.

How Do We Reproduce?

• Configure TerserPlugin as above.
• Настройте приостановку разделения кода / lazy, которая генерирует фрагменты маршрута (0.bundle.js и т.д.) Точно так же, как в React docs:

 // 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:

package.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 и исправить разделение кода).

Может быть, есть какой-то обходной путь, или, может быть, я что-то пропустил?

Заранее спасибо.