このブログは、create-react-app で作成された React プロジェクトです。インターネットのチュートリアルに従って、webpack の設定ファイルに難読化プラグインを追加することができます。最初は設定ファイルが見つからず、後でプロジェクトに組み込むために npm run eject を実行する必要があることがわかりました。フロントエンドのツールチェーンはまだよくわかっていませんね。
今、プロジェクトの config ディレクトリの webpack 設定ファイルでプラグインを設定できます。optimization の設定項目を直接検索し、プロジェクトにはすでに TerserPlugin が設定されていますので、次のように変更してください。
new TerserPlugin({
// 圧縮
minify: (file, sourceMap) => {
// https://github.com/mishoo/UglifyJS2#minify-options
const uglifyJsOptions = {
/* あなたの `uglify-js` パッケージのオプション */
};
if (sourceMap) {
uglifyJsOptions.sourceMap = {
content: sourceMap,
};
}
// ここではuglify-jsを使用していますが、他のものでも同じです
return require("uglify-js").minify(file, uglifyJsOptions);
},
// これをオンにするとコンパイル時間が短縮されます。計算集約型なので、cpucore numerを調整するだけで十分です
parallel: 16,
terserOptions: {
// コメントを削除
format: {
comments: false,
},
parse: {
// terserにecma 8コードを解析させたい。ただし、有効なecma 5コードを無効なecma 5コードに変換するような最小化ステップは適用したくない。これが 'compress' と 'output' セクションが ecma 5 に安全な変換のみを適用する理由です。
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// 有効なコードを壊すUglifyの問題のため無効化:
// https://github.com/facebook/create-react-app/issues/2376
// 追加の調査が必要:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// 有効なコードを壊すTerserの問題のため無効化:
// https://github.com/facebook/create-react-app/issues/5250
// 追加の調査が必要:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
// プロファイリングのために追加
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
// 絵文字と正規表現はデフォルトでは適切に最小化されないためオンにする
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
sourceMap: shouldUseSourceMap,
}),
// これは本番モードでのみ使用されます
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
parser: safePostCssParser,
map: shouldUseSourceMap
? {
// `inline: false` はsourcemapを別のファイルに出力するようにします
inline: false,
// `annotation: true` はブラウザがsourcemapを見つけるのを助けるため、cssファイルの末尾にsourceMappingURLを追加します
annotation: true,
}
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
もちろん、デフォルトのプラグイン以外にも、uglifyjs-webpack-plugin のような他のプラグインを自分でインポートすることもできます。