はじめに

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 v vue
vue@2.6.10 | MIT | deps: none | versions: 250

$ npm v 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 に設定を追加

参考文献

関連記事