问题标签 [terser]

我想要的是？

使用TerserPlugin将 sourceMapsomething.js.map文件存储到特定位置。我找到了一些关于如何自定义缩小的基本说明 - https://github.com/webpack-contrib/terser-webpack-plugin#custom-minify-function，但我无法使用它。

这是来自 webpack.config.ts 的优化对象：

这是我的缩小功能，但我根本找不到“导出”.js.map 的方法。或者不明白它是如何工作的。

devtool: ifNotTest(ifDevelopment('eval', 'source-map'))

我花了两天时间试图弄清楚 minify 函数是如何工作的，并质疑自己为什么它们仍然引用uglify-js. 我认为 terser 可以有一些选项来自定义 sourceMap，但是 webpack 的文档对于这种情况并没有多大用处： https ://webpack.js.org/plugins/terser-webpack-plugin/#minify

我正在使用 Angular 6 来实现 ASP NET Web 应用程序的前端。关于性能问题，我想减小 vendor.js 文件的大小。因此，我找到了使用以下命令构建 Angular 项目的解决方案： ng build --prod --base-href "myURL" 现在我收到以下错误：

'XX' 是一个像737de149a78. 我已经阅读了几个问题和答案，将 Terser 的版本更改为 3.14.1 并没有帮助。我解决此问题的第一种方法是尝试在整个项目中查找名为“f”的变量或模块，以查看它是否在任何时候被重新声明，但名为“f”的变量不存在。

所以我的问题是：如何在不经过数千个文件和代码行的情况下找到似乎被重新声明的变量？还是有其他方法可以解决此错误？

包.json：

我很高兴得到任何帮助。

编辑：

我有一个临时解决方案，这可能会帮助其他必须面对这个问题的人： ng build --prod --optimization=false --base-href "myURL".

为什么在我的情况下这不是一个合适的解决方案：

在我用--prod标志构建了我的 Angular 项目后，该项目没有正确构建，但仍然创建了 scripts.XX.js 文件。在这个文件中有多个名为 f 的变量。作为下一步，我看了一下--prod标志的作用（参见：https ://angular.io/cli/build ）。

在进一步的详细信息（参见：https ://angular.io/guide/workspace-config ）下，我读到启用该--prod标志会导致重写代码以使用简短、神秘的名称（“缩小”）。

还声明了应用程序构建器使用 webpack 构建工具（参见：https ://webpack.js.org/plugins/terser-webpack-plugin/ ）。

所以我解决这个问题的方法是禁用 terser 插件的缩小功能。这可以通过将"optimization"angular.json 文件中的更改为false（请参阅：AngularCli: disable minification）来完成：

当然，您可以改用--optimization=false标志。

但是：禁用 minify 功能会导致 main.js 文件变大，这是我试图避免的。所以对我来说，没有优化就使用 --prod 标志是没有意义的。

所以我使用bundlephobia来审核我的包的包大小。Bundlephobia 有一个名为“导出分析”的部分，可为您提供单个导出的捆绑包大小。

所以这个包中的每个函数都是纯函数，所以，除非我遗漏了什么，我认为这些应该为每个函数显示一个较小的大小，但所有函数（重新导出的除外）都具有相同的大小。

我试过了：

• 添加"sideEffects": false"到我的package.json
• 用#__PURE__

我正在使用汇总，这是我的汇总配置：

没什么。

我该怎么做呢？

我在 ES 模块中定义了一个函数，我想确保它是内联的。当它只在一个块中使用时，这很好用，但是如果我从两个单独的块中调用该函数，webpack 会生成阻止内联的模块查找模式：

使用 TerserPlugin 通过 webpack 运行它，并使用以下合理的标准选项

产生没有内联的结果。另一方面，如果我不将代码拆分成块（即，将import()表达式更改为普通的顶级导入），或者如果我不从两个块中使用 inlineMe，则内联可以正常工作。我希望它与 webpack 重写块的方式有关（它最终似乎是由 间接定义的某种Object(r.a)(!0)地方，因此 terser 对此无能为力也就不足为奇了）。r.afunction r(e){return e}n.d(t,"a",(function(){return r}))

是否有一些咒语可以使这种内联跨多个块工作？也许某种方式告诉 webpack 这个函数/模块应该比其他的更可用？

我希望将我的代码部署到 heroku，但是在构建我的 Angular 应用程序时我总是遇到错误。我尝试使用以下命令来构建我的 Angular 项目。'ng build --prod','ng build --aot --prod' 这两个命令都导致相同的错误。ng build --aot --prod 点击查看错误

附上我的 package.json，为 package-lock.json 添加了屏幕截图。packagelock.json 包锁

请帮忙

我有一个带有一个大 javascript 文件 (ES6) 的简单 Web 项目，我想缩小和丑化它，这样其他人就更难获得它

经过一番搜索，我找到了更简洁的

我一直在以下列方式使用它

当我来检查创建的输出文件时，我确实注意到它的缩小（没有空格）但实际上并没有丑化，对它进行自动格式化会将其返回到原始和可读状态

我如何在不使用 webpacks 或类似的东西的情况下丑化我的文件

谢谢

我遇到了问题npm run build，它有效地调用了vue-cli-service build. 我的目标是删除console生产版本中的语句。然而，第一次失败了。如果我立即再次运行它（无需更改代码），它就会成功。

为了重现性和隔离性，我在节点 docker 中运行代码：

在 docker 我设置环境

在干净的环境中，运行构建失败：

这些错误都是eslint出现console.命令时的错误：

立即再次运行构建，构建成功：

PRODUCTION babel setup和production eslint setup起源于我的babel.config.js和.eslint.rc。

我配置eslint如下，console.在生产中的语句失败：

我已经将 babel 配置为删除console.语句：

为了修复它，我还配置terser了删除console.语句：

版本（来自package.json）。为了修复它，升级到 vue-cli 4，也发生在 vue-cli 3 中：

问题：

控制台打印PRODUCTION babel setup并production eslint setup显示在一个干净的构建中，配置被加载了多次。然后它以某种方式失败。再次运行它似乎更简单，配置加载一次然后成功。

如何配置 vue 以第一次成功构建，删除控制台语句？

是缓存吗？

构建成功后，删除缓存：

然后再次构建它 ( npm run build) 等于第一次运行：失败

现代建筑？

创建modern构建时（在npm run build填充缓存之后）：

成功构建传统构建，但失败了现代构建：

成功后立即再次运行现代构建。因此，我总共需要运行 3 次才能使现代构建成功（第一次遗留捆绑包失败，第二次遗留捆绑包成功但现代构建失败，第三次遗留和现代构建成功）。

Vue 问题

在https://github.com/vuejs/vue-cli/issues/5399有一个相关的 vue 问题

我目前在 gitlab 运行器上构建我的应用程序时遇到问题，问题并不总是出现，这是错误的屏幕截图

我一直在尝试解决方案，例如调整节点内存并将测试器版本指定 为 package.json 中的"terser":"3.14.1"，但没有希望。

package.json ：

该构建在 angular v8 中运行良好，但升级后我遇到了这个问题。谢谢。

默认情况下，webpack 使用可以缩小 es6+ 代码的 terser。在使用 webpack 构建之后，我已经在 ie 中成功运行了 es6+ 代码。

那么，在 webpack 中使用 babel-loader 有什么意义呢？

• 操作系统：

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：

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

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

我们如何繁殖？

• 如上所述配置 TerserPlugin。
• 配置代码拆分 Suspense/lazy，生成路由块（0.bundle.js 等），就像在 React 文档中一样：

• 配置 TypeScript：

包.json：

tsconfig.json：

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

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

提前致谢。