はじめに

Vue.js プロジェクトでビルドする際に、Terser を使って圧縮する方法について整理した。

TL;DR

• npm i -D terser-webpack-plugin でインストール
• vue.config.js に設定を追加

目次

1. はじめに
2. TL;DR
3. 環境・条件
4. 詳細
5. まとめ
6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15
BuildVersion:	19A583

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls vue
vue@2.6.10 | MIT | deps: none | versions: 250

$ npm ls terser-webpack-plugin
terser-webpack-plugin@2.1.3 | MIT | deps: 8 | versions: 18

詳細

terser-webpack-plugin - npm を使う。

npm でインストール

1

$ npm i -D terser-webpack-plugin

vue.config.js にコンフィグを追加。各種設定は公式ドキュメントを参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

+const TerserPlugin = require('terser-webpack-plugin')

 module.exports = {
+  configureWebpack: config => {
+    config.optimization = {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            ascii_only: true,
+            compress: true,
+            mangle: true,
+          },
+        }),
+      ],
+    }
+  },
 };

あとはビルド時に良きに計らってくれる。

まとめ

• npm i -D terser-webpack-plugin でインストール
• vue.config.js に設定を追加

参考文献

• terser-webpack-plugin - npm
• terser/terser
• TerserWebpackPlugin | webpack
• UglifyJSの代わりに、terserを使ってwebpackする - Qiita
• javascript - Vue CLI 3 vue.config.js vs webpack.config.js for plugins - Stack Overflow
• Working with Webpack | Vue CLI

関連記事

• Vue.js で FontAwesome を使う方法
• Vue.js を使ってメインページ側で動作する Chrome 拡張機能を開発する方法
• webpack & Babel を使って Chrome 拡張機能を開発するためのテンプレート(Hot Reload 付き)
• vue-svg-loader を使って Vue.js プロジェクトで SVG を描画する
• Vue.js で vue-i18n が動作しない問題の修正方法
• axios で添付ファイルありのリクエスト(multipart/form-data の POST)
• JavaScript で URL のクエリパラメータを操作する方法
• jQuery Select2 で、初期値の設定と選択状態のクリア