PageSpeed Insights の
Build 後の
/** * @license * Copyright 2017 Google Inc. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */
Webpack 4 の JavaScript の 圧縮機能
optimization を
Webpack 4 では、
デフォルトでは、
Webpack からoptimization.minimizer
に、
terser-webpack-plugin の インストール、 設定
webpack-contrib/terser-webpack-plugin: Terser Plugin を
インストール
npm i -D terser-webpack-plugin + terser-webpack-plugin@1.2.3
設定
extractComments
に'all'
を指定する
README.md
に設定方法の 記載が ありますが、 extractComments
に、all
を指定すると 全ての コメントを 削除できます。 const Merge = require("webpack-merge"); const BaseConfig = require("./webpack.base.config.js"); const TerserPlugin = require('terser-webpack-plugin'); module.exports = Merge(BaseConfig, { plugins: [], optimization: { minimizer: [ new TerserPlugin({ extractComments: 'all', }), ], }, });
terserOptions.output.comments
にfalse
を指定する
terserOptions.output.comments
にfalse
を指定する ことでも、 コメントの 削除は 可能でした。 const Merge = require("webpack-merge"); const BaseConfig = require("./webpack.base.config.js"); const TerserPlugin = require('terser-webpack-plugin'); module.exports = Merge(BaseConfig, { optimization: { minimizer: [ new TerserPlugin({ terserOptions: { output: { comments: false, }, }, }), ], }, });
設定に よる 出力ファイルの 違い
option 指定の
TerserPlugin の、
extractComments
に'all'
を指定する 場合
コメントが除去された JavaScript ファイルと、 LICENCE 情報のみ 抽出された ファイルが 出力されました。
JavaScript の一行目には、 LICENCE は 別ファイルに 記載が ある 旨の コメントが 付与されます。 terserOptions.output.comments
にfalse
を指定する 場合
コメントが除去された JavaScript ファイルだけが 出力されました。 terserOptions.output.comments
にall
を指定する 場合
出力が異なったので、 気に なって 実行してみた ところ、 コメントが 除去されず 全て JavaScript ファイル内に 出力されました。
コメントはextractComments
に'all'
を
console.log
の 出力を 除去する
TerserPlugin
で
terserOptions.compress.drop_console
をtrue
に
const Merge = require("webpack-merge"); const BaseConfig = require("./webpack.base.config.js"); const TerserPlugin = require('terser-webpack-plugin'); module.exports = Merge(BaseConfig, { plugins: [], optimization: { minimizer: [ new TerserPlugin({ extractComments: 'all', terserOptions: { compress: { drop_console: true, }, }, }), ], }, });
参考
以下、
- Webpack 4 production モードで
console.log を 削除したい - かも メモ - webpack@4の
modeと minimize(UglifyJS) - 30歳からの プログラミング - webpack 4 入門 - Qiita
- reactjs - remove console.logs with Webpack & Uglify - Stack Overflow
以上です。
コメント