vue-cli3打包壓縮、混淆、去註釋

目錄

• 1. 描述
• 2. uglifyjs-webpack-plugin
• 2.1 github
• 2.2 安裝
• 2.3 配置
• 3. terser-webpack-plugin
• 2.1 github
• 2.2 安裝
• 2.3 配置

1. 描述

使用vue-cli編寫的插件或庫文件，打包的時候若是須要壓縮、混淆、去註釋，去除debugger、console.log等，可使用 uglifyjs-webpack-plugin 或者 terser-webpack-plugin，前者不支持es6，打包時可能會報Unexpected token的錯誤，後者是前者對es6的支持版本。

2. uglifyjs-webpack-plugin

2.1 github

• https://github.com/webpack-contrib/uglifyjs-webpack-plugin

2.2 安裝

npm install uglifyjs-webpack-plugin --save-dev

2.3 配置

在vue.config.js中配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// module.exports 中配置，可加參數，詳見github文檔或百度
configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(new UglifyJsPlugin())
  }
}

3. terser-webpack-plugin

2.1 github

• https://github.com/webpack-contrib/terser-webpack-plugin

2.2 安裝

npm install terser-webpack-plugin --save-dev

2.3 配置

在vue.config.js中配置

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

// module.exports 中配置，可加參數，詳見github文檔或百度
configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(new TerserPlugin())
  }
}