// 未分类
create-react-app cli 创建的React项目配置js压缩
发布 2021-06-20 · 永久链接
代码混淆压缩
这个博客是用create-react-app创建的react项目，按网上的教程，可以在webpack的配置文件添加混淆的插件
，一开始找不到配置文件，后来才知道要`npm run eject`把配置文件植入到项目里才行。还是不太熟前端的工具链哈。
现在就可以到项目的`config`目录下的webpack配置文件配置插件了，直接搜索*optimization*配置项，项目已经配好一个`TerserPlugin`了，直接修改成这样
``` js
new TerserPlugin({
// 压缩
minify: (file, sourceMap) => {
// https://github.com/mishoo/UglifyJS2#minify-options
const uglifyJsOptions = {
/* your `uglify-js` package options */
};
if (sourceMap) {
uglifyJsOptions.sourceMap = {
content: sourceMap,
};
}
// 这里用的是uglify-js,使用其他的也是一样的
return require("uglify-js").minify(file, uglifyJsOptions);
},
// 打开这个可以加快编译时间， 计算密集所以是 cpucore numer 左右就好
parallel: 16,
terserOptions: {
// 去掉注释
format: {
comments: false,
},
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending further investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` forces the sourcemap to be output into a
// separate file
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true,
}
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
```
当然，除了默认的这个插件，也可以自己引入别的插件,比如`uglifyjs-webpack-plugin`