やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > JavaScript > webpackで生成されるjsのファイルサイズを圧縮するも失敗

webpackで生成されるjsのファイルサイズを圧縮するも失敗

JavaScript

2018-01-30時点。

圧縮できなかった

bundle.jsファイルを圧縮しようとするも失敗。

$ webpack --optimize-minimize

Hash: 6d23a2e790698cac8368
Version: webpack 3.10.0
Time: 10556ms
          Asset    Size  Chunks                    Chunk Names
    ./bundle.js  566 kB       0  [emitted]  [big]  main
./bundle.js.map  736 kB       0  [emitted]         main
  [12] ./front.js 1.43 kB {0} [built]
  [66] (webpack)/buildin/module.js 517 bytes {0} [built]
  [67] (webpack)/buildin/global.js 509 bytes {0} [built]
    + 74 hidden modules

ERROR in ./bundle.js from UglifyJs
Unexpected token: operator (>) [/tmp/env/node/markdonwnit/node_modules/markdown-it-anchor/index.js:3,0][./bundle.js:18973,19]

調査

ES6構文

エラーログにあった/tmp/.../node_modules/markdown-it-anchor/index.jsの3行目をみてみる。

const slugify = s =>

=>というのは関数定義の省略記法。ES6という新バージョンの言語シンタックス。

https://qiita.com/morrr/items/883cb902ccda37e840bc#%E3%82%A2%E3%83%AD%E3%83%BC%E9%96%A2%E6%95%B0

babelインストール

問題はES6のコードはそのままだと使えないこと。babel-loaderをインストールする必要がある。

https://qiita.com/HayneRyo/items/74892d3a37ee96a5df60

$ npm install babel-core babel-loader babel-preset-react babel-preset-es2015

npm WARN deprecated babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm WARN markdonwnit@1.0.0 No description
npm WARN markdonwnit@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})

+ babel-loader@7.1.2
+ babel-preset-es2015@6.24.1
+ babel-preset-react@6.24.1
+ babel-core@6.26.0
added 94 packages in 29.866s

webpack.config.js

後半のmodule: {...を追記した。'react'は今回不要かもしれない。

module.exports = {
  entry: './front.js',
  output: {
    filename: './bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/, 
        exclude: /node_modules/, 
        //loader: "babel",
        loader: "babel-loader", 
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

webpack.config.jsの読み方、書き方 - dackdive's blog

圧縮(2回目)

ふたたび圧縮するも同じく失敗。

$ webpack --optimize-minimize

Hash: c52ad156f3e7301cb795
Version: webpack 3.10.0
Time: 11840ms
          Asset    Size  Chunks                    Chunk Names
    ./bundle.js  566 kB       0  [emitted]  [big]  main
./bundle.js.map  736 kB       0  [emitted]         main
  [12] ./front.js 1.37 kB {0} [built]
  [66] (webpack)/buildin/module.js 517 bytes {0} [built]
  [67] (webpack)/buildin/global.js 509 bytes {0} [built]
    + 74 hidden modules

ERROR in ./bundle.js from UglifyJs
Unexpected token: operator (>) [/tmp/env/node/markdonwnit/node_modules/markdown-it-anchor/index.js:3,0][./bundle.js:18971,19]

uglifyjs-webpack-plugin インストール

webpack Unexpected token: operator (>)でググる。

webpack - Unexpected token: operator (>) from UglifyJs - Stack Overflow

uglifyjs-webpack-pluginなるものが必要？ググる。

【webpack】(2018年1月現時点で)ES2015 (ES6)のままminifyする方法 - Qiita

$ npm install uglifyjs-webpack-plugin

> uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/env/node/markdonwnit/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN markdonwnit@1.0.0 No description
npm WARN markdonwnit@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})

+ uglifyjs-webpack-plugin@1.1.8
added 43 packages, updated 1 package and moved 2 packages in 32.857s

webpack.config.js

以下を追記。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  ...
  plugins: [
    new UglifyJsPlugin({uglifyOptions: {ecma: 6}}),
  ],
  ...
}

圧縮(3回目)

失敗。でもログが変化した。 ./bundle.js 200 kBになってる。./bundle.js 566 kBだったので、半分以下。

$ webpack --optimize-minimize

Hash: c52ad156f3e7301cb795
Version: webpack 3.10.0
Time: 29328ms
      Asset    Size  Chunks             Chunk Names
./bundle.js  200 kB       0  [emitted]  main
  [12] ./front.js 1.37 kB {0} [built]
  [66] (webpack)/buildin/module.js 517 bytes {0} [built]
  [67] (webpack)/buildin/global.js 509 bytes {0} [built]
    + 74 hidden modules

ERROR in ./bundle.js from UglifyJs
TypeError: Cannot read property 'sections' of null
    at new SourceMapConsumer (/tmp/env/node/markdonwnit/node_modules/source-map/lib/source-map-consumer.js:20:20)
    at /tmp/env/node/markdonwnit/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/dist/index.js:75:21
    at Array.forEach (<anonymous>)
    at Compilation.<anonymous> (/tmp/env/node/markdonwnit/node_modules/webpack/node_modules/uglifyjs-webpack-plugin/dist/index.js:54:20)
    at next (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:204:14)
    at /tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/index.js:261:13
    at step (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:90:11)
    at done (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:99:22)
    at /tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:105:15
    at _class.boundWorkers (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:76:13)
    at enqueue (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:96:17)
    at /tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:116:11
    at Array.forEach (<anonymous>)
    at _class.runTasks (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:94:13)
    at Compilation.<anonymous> (/tmp/env/node/markdonwnit/node_modules/uglifyjs-webpack-plugin/dist/index.js:187:18)
    at Compilation.applyPluginsAsyncSeries (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:206:13)
    at self.applyPluginsAsync.err (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:666:10)
    at Compilation.applyPluginsAsyncSeries (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:195:46)
    at sealPart2 (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:662:9)
    at Compilation.applyPluginsAsyncSeries (/tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:195:46)
    at Compilation.seal (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compiler.js:504:17)
    at /tmp/env/node/markdonwnit/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:507:11)
    at processModuleDependencies.err (/tmp/env/node/markdonwnit/node_modules/webpack/lib/Compilation.js:477:14)
    at process._tickCallback (internal/process/next_tick.js:150:11)

ブラウザで開いてみるも真っ白

ブラウザで開いてみると何も表示されない。開発ツールでログを見ると以下のエラー。

Uncaught ReferenceError: $ is not defined

エラーそのままでググってみる。

jQueryに依存しているライブラリがある場合、jQueryを先にロードしないとこのエラーになるらしい。

$ is not definedはそのままの意味で$が未定義。ふつう、$にjqueryのオブジェクトをセットするのが定番。jqueryに依存したライブラリも$変数にjqueryオブジェクトがセットされている前提でコーディングされていると思われる。

webpackエラーログ

今回はブラウザでのエラー以前に、webpackコマンドの時点でエラーになっている。つまり、npmモジュールからブラウザで使えるjsコードに変換する最中で問題があるようだ。たぶんまだjsコードを吐き出しの途中だったのだろう。

エラーログの冒頭をみてみる。

ERROR in ./bundle.js from UglifyJs

ES6は圧縮できない？

ES6コードの縮小をサポートしていません。

圧縮(4回目)

失敗。

webpack.config.js

devtool: 'source-map',をコメントアウトした。

  //devtool: 'source-map',

$ webpack --optimize-minimize
Hash: bb904e68e7ae6fa38efc
Version: webpack 3.10.0
Time: 31182ms
      Asset    Size  Chunks             Chunk Names
./bundle.js  200 kB       0  [emitted]  main
  [12] ./front.js 525 bytes {0} [built]
  [66] (webpack)/buildin/module.js 517 bytes {0} [built]
  [67] (webpack)/buildin/global.js 509 bytes {0} [built]
    + 74 hidden modules

ERROR in ./bundle.js from UglifyJs
Invalid assignment [./bundle.js:1,178226]

エラー。ERROR in ./bundle.js from UglifyJsが同じ。

以下も参照したが変わらず。

結論

ES6構文を使った圧縮はできない？

本筋からどんどん遠ざかるし、もう諦めた。