无法缩小 Vue.js 应用程序

Question

我有一个 Vue.js 应用程序，其中包含以下代码摘录：

(function() {
    initApp();
})();

function initApp() {
    window.myApp = new Vue({
        el: '#wrapper',
        data() {
  return {
  somedata: []
            }
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

当我尝试缩小它时，它因错误 Error : Unexpected token: punc (() 而失败，但应用程序运行成功。我不确定为什么？

Answer 1

那些压缩器只支持旧版本的 JavaScript。他们最多支持 ES5。要使您的代码工作，请转换它：

(function() {
    initApp();
})();

function initApp() {
    window.myApp = new Vue({
        el: '#wrapper',
        data: function() { // changed this line
            return {
                somedata: []
            }
        }
    });
}

它应该压缩。

详情：

They use uglify-js: "^3.3.10", that is known for not supporting ES6(uglify-es does) .

来自 their repo（强调我的）：

UglifyJS 3

UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.
Note:

(...)

uglify-js only supports JavaScript (ECMAScript 5).

To minify ECMAScript 2015 or above, transpile using tools like Babel.

Answer 2

你是指编译后的js文件(app.js)？如果是那种情况，您只需为生产编译 "npm run production"。

Answer 3

您的压缩器不兼容 ES6

你得到这个错误是因为，像，你的压缩器不兼容 ES6。（当我从 jQuery 切换到 Vue.js 时，我遇到了同样的错误——使用 ES6 语法。）

解决方法：用Terser代替。

它符合 ES6，正在积极开发中（在撰写本文时），并且是 Uglifyjs 的直接替代品。

奖励：如何使用 Terser 一次性缩小大量文件

您可以像这样从命令行在 Terser 中缩小单个文件：

$terser file.js -m -o file.min.js

但是如果你有一大堆文件要一次性缩小，那就太乏味了。我找到 this excellent answer 并稍微修改了它。将此添加到您的 .bash_profile:

alias renderjs='rm *.min.js; for f in *.js; do short=${f%.js}; terser $f -m -o $short.min.js; done'

导航到您的 js 目录和运行 renderjs。现在所有您的 *.js 文件都有一个缩小版本。不错！

无法缩小 Vue.js 应用程序

Unable to minify Vue.js application

javascript

minify

vue.js

详情：

UglifyJS 3

您的压缩器不兼容 ES6

奖励：如何使用 Terser 一次性缩小大量文件