typescript - WebPack+TerserPlugin:mangle 会忽略属性和类名——mangled 代码的质量很差
问题描述
生成的代码被缩小但几乎没有被破坏。这是它在谷歌浏览器(美化)中的样子:
所有属性名称,许多变量都有其原始名称。即使明确指定了 Terser 的 mangle 选项:
- 破坏:真的,
- 源地图:假,
- keep_fnames:假,
- 顶层:真,
这是 WebPack 配置:
const TerserPlugin = require('terser-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/scripts/index.ts',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader',
options: { configFile: 'tsconfig-build.json' }
},
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
plugins: [ ],
// PROBLEMS HERE:
optimization: {
minimize: true,
minimizer: [new TerserPlugin({
sourceMap: false,
extractComments: false, // To avoid separate file with licenses.
terserOptions: {
mangle: true,
sourceMap: false,
//keep_classnames: false,
keep_fnames: false,
toplevel: true,
},
})],
},
output: {
path: path.resolve(__dirname, resultDirPath),
filename: 'main.js',
publicPath: './',
}
}
我错过了配置中的某些内容吗?
解决方案
我相信在您的原始配置中,您需要添加mangle.properties以使您的 ES6 类方法和数据成员被破坏。为了避免破坏外部库,我使用与下面的正则表达式匹配的前缀策略“唯一地”命名我的所有方法和数据成员以进行破坏。
new TerserPlugin({
terserOptions: {
mangle: {
properties: {
regex: /(^P1|^p1|^_p1)[A-Z]\w*/
}
}
}
})
"terser-webpack-plugin": "^2.2.1",
这种方法的细微之处:
- 我的命名目前与我正在使用的外部库中的命名不匹配。在未来的库版本中不能保证这一点。
- 它使我原来的 src 有点难看。
推荐阅读
- c++ - 了解默认模板参数何时是重定义以及何时不在 SFINAE 技术中
- c - 为什么我在 C 中的罪孽计算代码返回错误的值?
- amazon-web-services - 大型(> 1MB)响应json的Kastrel调整
- jmeter - Jmeter - 使用 JSR223 后处理器调用 javascript
- pdf - PDF 是否支持数据降级保护?
- java - 使用分隔符获取字符串的某些部分
- xpath - 设置正确的 xpath
- reactjs - 即使我只是更新嵌套属性,Redux 商店也会更新所有内容?
- python - 将 TK 中的多个列表框与 pandas Dataframe 绑定
- mysql - TypeOrm - NestJS 使用 queryBuilder