Thinking of UGLIFYJS packing compression problem

Issue background

Recently did a WebApp project, QA with mobile phone testing function, Iphone6plus performance is white screen, other mobile phone visual is OK, because in the test other projects also found on this iphone6 on the other mobile phone is not the same. So I thought the phone was out of the question, or its version is too low;

However, the impact of the white screen is to be paid attention to, so in the idle time to take the initiative to see the VSCosole log information, the console reported a warning message:

unexception token const ...

Then read the loaded JS source, unexpectedly found a big pit:

• Code is not compressed

• Part of the code is not compiled into ES5

At this time in the heart of the cold, a burst of cold, the loss of a look at this problem, or send to the line will have a major problem.

Why did Uglifyjs get an error?

The above problem, first think of the Webpack compression code plug-in problem, the project used uglifyjs-webpack-plugin to compress the code. So in the local execution of the release on-line operation code compiled compression, sure enough, compression similar errors:

ERROR in static/javascripts/test_0_30fbc92.js from UglifyJsUnexpected token: name (instance) [static/javascripts/test_0_30fbc92.js:2854,6]

Specific can be seen:

Then locate the error location of the specified file, and find all the ES6 syntax:

• The contents of the first file 2874 lines:let instance

• The contents of the second file 78 lines:function loadJS(url, {timeout = 5000, crossOrigin = false } = {}) {

As you can see, both of these locations are the first time that a file appears es6 not compiled, but there are many es6 grammars that are not compiled after this.

Perhaps here someone will ask, the above compression error why can also be in non-iphone6p other mobile phone can be normal access to it, possibly for the following reasons:

• Uglifyjs-webpack-plugin Although the error does not prevent the output of the code, it can also be seen that the code has been produced. But its content is not compressed

• Another reason I guess is that there is no problem on the phone open browser already supports these ES6 syntax

Analyzed so much, why Uglifyjs-webpack-plugin will error, because the current reference Uglifyjs-webpack-plugin version is 0.4.6 , it relies on uglify-js ; it does not support compression ES6, Can you refer to GitHub's Issueit seems like Uglify-js does don't support ES6?.

So:

UGLIFY-JS when compressing the code, the ES6 syntax is not compressed and an error is also encountered.

If you want to compress the E6 code, you can use uglify-es it to provide configuration properties ecma to compress different types of JS.

Es6 Why not compile

The above analysis we learned that Uglify-webpack-plugin is not compressed, because the code mixed ES6 syntax, then ES6 syntax why not compile it? Speculate:

When compiling ES6 using Babel, some files are not in the specified Babel compilation scope due to Webpack misconfiguration, Babel thus ignoring compilation of these JS files

Our project directory structure is as follows:

This is a project shared by multiple micro-systems that share most of the same components, and they share a single webpack configuration.

The configuration of Webpack for JS is as follows:

 { test  :  / \.  js  $  /       loader  :   ' Babel-loader '        include  :  [path . resolve  ( ' Moudlea ' )         path . resolve     ( ' Moudleb ' )] }   

But the API directory that interacts with the server, the component directory of common components, and the common JS method directory Common directory are not configured in the include array above Babel-loader, Thus Babel-loader will ignore these directories in the JS file compilation, resulting in these directories JS file is not babel-loader compiled. Thus causing the above problems.

So, summarize:

The development process encountered any problems or need to be taken seriously, to maintain a bug that is the mentality to find and find out why, in order to reduce the risk of major problems on the line.

Reference

• It seems like Uglify-js does don't support ES6

Thinking of UGLIFYJS packing compression problem