无法缩小Vue.js应用程序

Question

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

url(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
url(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),

(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>，但应用程序运行成功。我不确定为什么？

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"，以not supporting ES6(uglify-es does)而闻名。

来自their repo（强调我的）：

  

UglifyJS 3

     

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

     注意：      

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

Answer 2

您的压缩机不符合ES6

您收到该错误消息是因为，与pacdcjunior's said类似，您的压缩器也不符合ES6。 （当我使用ES6语法从jQuery切换到Vue.js时，遇到了同样的错误。）

解决方案：改用Terser。

它正在开发中（在撰写本文时）符合ES6，并且可以直接代替Uglifyjs。

奖金：如何使用Terser一次减少很多文件

您可以通过以下命令在Terser中缩小单个文件：

$ for col in df.select_dtypes('category'): df[col].cat.add_categories('unknown', inplace=True) df.fillna('unknown',inplace=True)

但是，如果您要一口气压缩文件，那将很乏味。我发现了this excellent answer并对其做了一些修改。将此添加到您的.bash_profile：

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

导航到您的alias renderjs='rm *.min.js; for f in *.js; do short=${f%.js}; terser $f -m -o $short.min.js; done'目录并运行js。现在，您的renderjs文件的 all 版本都有缩小版本。很好！

Answer 3

您是指编译后的js文件（app.js）吗？如果那样的话，您只需编译生产“ npm run production”。