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

它應該壓縮。

細節：

他們使用uglify-js: "^3.3.10" ，這是因為不支持ES6（ uglify-es ） 。

從他們的回購 （強調我的）：

UglifyJS 3

UglifyJS是一個JavaScript解析器，minifier，壓縮器和美化工具包。

注意：

• （......）
• uglify-js 僅支持JavaScript（ECMAScript 5） 。
• 要縮小ECMAScript 2015或更高版本，請使用像Babel這樣的工具進行轉換。

Answer 2

您的壓縮機不符合ES6標准

你得到的錯誤是因為，就像pacdcjunior所說 ，你的壓縮機不符合ES6標准。 （當我使用ES6語法從jQuery切換到Vue.js時，我得到了同樣的錯誤。）

解決方案：改用Terser 。

它符合ES6標准，處於積極開發階段（撰寫本文時），是Uglifyjs的直接替代品 。

額外獎勵：如何使用Terser一次性縮小大量文件

您可以從命令行縮小Terser中的單個文件，如下所示：

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

但如果你有一堆文件可以一次性縮小，那將是乏味的。 我找到了這個優秀的答案並對其進行了一些修改。 將其添加到.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”。