MENU

Terser混淆配合VueCli4使用的配置

February 20, 2021 • 折腾

因网上的大部分资料都千篇一律无法解决问题,故尝试成功后,在此归档。

Terser 插件的使用需要注意 VueCli 的版本,3 和 4 的版本存在差异。且本质上插件是对 WebPack 流程产生作用,故需要看清 WebPack 版本。插件版本仅支持 WebPack4。

//vue.config.js
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
    transpileDependencies: [
        'vuetify'
    ],
    productionSourceMap: false,
    configureWebpack: config => {
        config.optimization = {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        ecma: undefined,
                        warnings: false,
                        parse: {},
                        compress: {
                            drop_console: true
                        },
                        mangle: true, // Note `mangle.properties` is `false` by default.
                        module: false,
                        output: {
                            comments: false
                        },
                        toplevel: false,
                        nameCache: null,
                        ie8: false,
                        keep_classnames: undefined,
                        keep_fnames: false,
                        safari10: false,
                    },
                }),
            ],
        }
    }

}
Archives QR Code
QR Code for this page
Tipping QR Code