Having difficulty in compressing Vue.js application

Question

Having difficulty in compressing Vue.js application

My Vue.js Application contains the following code snippet:

(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>

Despite successfully running the application, when I attempt to minify the code, it fails with the error

Error : Unexpected token: punc (()

. This leaves me perplexed as to the reason behind it.

javascript vue.js minify

Answer 1

Answer №1

These compressors are limited to supporting older versions of JavaScript, specifically up to ES5. To get your code to work properly, you'll need to convert it:

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

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

By doing this, it should compress as expected.

Details:

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

According to their repository (emphasis added):

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

These compressors are limited to supporting older versions of JavaScript, specifically up to ES5. To get your code to work properly, you'll need to convert it:

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

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

By doing this, it should compress as expected.

Details:

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

According to their repository (emphasis added):

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 3

Answer №2

Your compressor is not compatible with ES6

The reason you are encountering this error is because, as mentioned by pacdcjunior, your compressor does not support ES6. (I faced the same issue when transitioning from jQuery to Vue.js, which uses ES6 syntax.)

Resolution: Switch to Terser instead.

Terser is ES6 compliant, actively developed (at the time of writing), and serves as a direct alternative to Uglifyjs.

Extra: Minifying Multiple Files at Once with Terser

To minify a single file using Terser from the command line, use this command:

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

However, if you have numerous files to minify collectively, the process can be cumbersome. I came across this helpful answer and made a slight adjustment. Add the following to your .bash_profile:

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

Access your js directory and execute renderjs. Now, every *.js file will have a minified version. Convenient!

Answer 4

Your compressor is not compatible with ES6

The reason you are encountering this error is because, as mentioned by pacdcjunior, your compressor does not support ES6. (I faced the same issue when transitioning from jQuery to Vue.js, which uses ES6 syntax.)

Resolution: Switch to Terser instead.

Terser is ES6 compliant, actively developed (at the time of writing), and serves as a direct alternative to Uglifyjs.

Extra: Minifying Multiple Files at Once with Terser

To minify a single file using Terser from the command line, use this command:

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

However, if you have numerous files to minify collectively, the process can be cumbersome. I came across this helpful answer and made a slight adjustment. Add the following to your .bash_profile:

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

Access your js directory and execute renderjs. Now, every *.js file will have a minified version. Convenient!

Answer 5

Answer №3

Are you referring to the compiled JavaScript file (app.js)? If so, you can simply compile it for production by running "npm run production".

Answer 6

Are you referring to the compiled JavaScript file (app.js)? If so, you can simply compile it for production by running "npm run production".

Having difficulty in compressing Vue.js application

Answer №1

Details:

UglifyJS 3

Answer №2

Your compressor is not compatible with ES6

Extra: Minifying Multiple Files at Once with Terser

Answer №3

Similar questions

Encountering 'Element not found' error when automating Flight Booking on MakeMyTrip.com using Selenium WebDriver, specifically while trying to select a flight after conducting a search

A technique in JavaScript that allows for assigning object property values using an external variable

The navigation menu dissolves into hiding at the uppermost part of the page upon scrolling upwards on iOS devices

What differences occur in JavaScript when the IE Developers Tools are accessed?

Module not found in Node.js Express JS

Middleware that handles form post requests quickly became overwhelmed and resulted in a RangeError

Updating route in AngularJS does not populate data (ngRepeat)

Getting the result from a JavaScript request, whether it's synchronous or asynchronous

Dynamic CSS class alteration on scrolling using Vue.js

Creating a Utils class in Vue.js with seamless access to Vuex through this.$store

Encountering the "Cannot set headers after they are sent to the client" error within an Express.js application

Transforming a flat TypeScript array into a nested object structure

What is the best way to display a number or integer using axios?

I am looking for a way to write a function that will emit an event to the parent component when an icon is

Error encountered while using Chart.js with JSON dataset

To ascertain whether the mouse is still lingering over the menu

In JavaScript, when a div element contains an iframe, the click event will not trigger on the div

What could be the reason my CSS and Javascript animation is not functioning properly?

Comparing two tables in jQuery/Javascript for matching data

Discovering common elements in various arrays of objects