使用webpack / TerserPlugin 预期行为实际行为代码我们如何繁殖？

编程问答 2022-12-06

问题描述

  • 操作系统：

MacOS Catalina 10.15.6

  • 节点版本：

v12.18.3

  • NPM版本：

6.14.7

  • webpack版本：

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中存在相同的错误，但是会创建路由块。仅在生产模式下出现问题。

我们如何繁殖？

  • 如上所述配置TerserPlugin。
  • 配置代码拆分Suspense / lazy，像React文档中那样生成路由块（0.bundle.js等）：
// 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中的错误并修复代码拆分）。

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

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-suspensetersertypescripttypescripttypescriptwebpackwebpackwebpack