无法缩小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: []
            }
        }
    });
}

它应该压缩。

Details:

They use uglify-js: "^3.3.10"，以not supporting ES6(uglify-es does)而闻名。

来自their repo（强调我的）：

UglifyJS 3

UglifyJS是一个JavaScript解析器，minifier，压缩器和美化工具包。

Note:

• (...)
• uglify-js仅支持JavaScript（ECMAScript 5）。
• 要缩小ECMAScript 2015或更高版本，请使用Babel等工具进行转换。

Answer 2

Your compressor isn’t ES6 compliant

你得到的错误是因为像pacdcjunior's said一样，你的压缩机不符合ES6标准。 （当我使用ES6语法从jQuery切换到Vue.js时，我得到了同样的错误。）

解决方案：使用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文件都有一个缩小版本。太好了！

Answer 3

你的意思是编译的js文件（app.js）？如果是这种情况，你只需编译生产“npm run production”。