When I first started writing the front end, the biggest headache was browser compatibility. There were so many scenarios to think about that I often couldn’t get started. I had a vision, I make an Excel, list 12345, I do not believe that can not exhaustive Ta, later, I was too naive.

Very old screenshot. PNG

Today’s browser compatibility issues can be described as follows:

In FireFox 47, the function page is blank.

Simple and direct, no nonsense, user feedback questions, real, powerful, to the point.

What version of Firefox are we using now?

That’s right, as of (2021-08-11), the latest version of FF is 90.x. The user’s computer is still 47.0!

It’s a long story.

I met with the product to get a general understanding of the problem phenomenon and the steps of recurrence. The real situation is like this.

If a service is limited to Oracle, the current system must maintain ff47.0 and be uniquely available.

Open the console and the error looks like this.

SyntaxError: missing = in const declaration
Copy the code

(To make matters worse, the packaging hasn’t been cut yet, it’s all in one file)

Next, take a look at it with us.

Problem analysis

Problems with clear error messages are usually relatively easy to locate, and this problem is one of those that are relatively easy to locate.

Let’s go find it. The first search term is what we want.

That is, a variable is declared using const, but no assignment is made. FF47 thinks this is a syntax error.

// Error example const color; // Correct example const color = 'red';Copy the code

Different browsers have different prompts.

SyntaxError: Const must be initialized (Edge)
SyntaxError: missing = in const declaration (Firefox)
SyntaxError: Missing initializer in const declaration (Chrome)
Copy the code

The explanation is so clear that we can go back and look at the code to see where it was used incorrectly.

Unfortunately, the package didn’t unpack it, so everything was in a heap, and you couldn’t quickly locate the specific line of code by linking.

Replace all const values in your code with lets to quickly see if an error occurs.

Obviously, the mistakes are still there.

It occurred to me that the project uses TS, and any errors will be reported in time, so it is not our own code that reported the error, it must be one or some files in node_modules.

Put compatibility issues aside for now and optimize the code base, at least with basic splitChunks.

The project used vUE -cli4, corresponding to Webpackage 4, introduced optimize- CSS -assets-webpack-plugin and Uglifyjs-webpack-plugin, set minimizer, splitChunks, Export filename, chunkFilename

NPM run build confirms that the package meets the requirements and there is no problem.

Review the development environment error message.

(Inner monologue: again clever fox also fight cunning hunter, manual dog head)

Sure enough, in the Runtime ESM Bundler package of vue framework, click the mouse to see what the source code is. At this moment, I am filled with a look of joy, a pair of small people with a successful mouth.

There are 118 uses of const in the code, and we found that almost every one of them is syntactically correct, except for the one in particular

for (const key in prev) {
    // something...
}
Copy the code

I remember seeing this question somewhere, right, the second item in the search results.

The obvious answer is a FF browser bug.

Bindings -> const -> for-in loop iteration scope.

Clone compat-table and modify environments. Firefox47 :{obsolete: true} You can see the compatibility of obsolete browsers

Dist /runtime-dom/dist/runtime-dom.esm-bundler.js for (let x in key); dist/runtime-dom.esm-bundler.js for (let x in key); Let’s see if anything changes.

From runtime-dom.esm-bundler.js to Runtime-core.esm-bundler.js

To prove that our modification point is correct, we will go down the slope of the donkey (manual dog head), to the whole.

Operate the following files in sequence:

@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
@vue/runtime-dom/dist/runtime-core.esm-bundler.js
@vue/reactivity/dist/reactivity.esm-bundler.js
@vue/shared/dist/shared.esm-bundler.js
vue-router/dist/vue-router.esm-bundler.js
Copy the code

Who doesn’t like a clean console without a Red Cross? As for the warning, you can ignore it. Performance doesn’t matter.

At this point, the problem analysis is over.

But, you know, we’re going to go online, we can’t do it all the time, we have to do it in some comfortable way.

Process optimization and reflection

Optimize the process

  1. Optimize the package build process and output files.
  2. Distinguish between different browser versions of the request file, special version of the request, special processing.
  3. Write a script to replace the packaged output file, replacing only those requested for the special versionvendors.xxxx.jsFile.
  4. Document why you want to do this.

Four steps, that’s a lot of trouble, but is there another way to do it that’s easier.

The right solution

We looked through the vue CLI documentation

Since the const syntax is es6, let’s switch to ES5.

Add the following configuration to vue.config.js:

transpileDependencies: [
    /[/\\]node_modules[/\\][@\\]vue[/\\]/,
    /[/\\]node_modules[/\\]vue-router[/\\]/
]
Copy the code

Problem solved perfectly.

Why isn’t this problem in VUe2

For Firefox 47, a specific browser version, we have some products that support it. The tech stack is Ve2. X, and even FF43 supports it.

Look at the source code or dist after the product, vue2 does not have ESM Bundler, the most important is a variety of XXXX-loader preprocessor.

At the same time, I tested other products in the same group and had the same problem in FF47 (same as vue3. X + TS).

Browser Compatibility

We have sorted out that the browser version supported by the product and aligned with this benchmark for a long time requires the product to ensure the stability of each browser and meet the compatibility requirements to the maximum extent during development.

However, not all products can meet this list, and there are always specific needs that must be met, hence the problem for this article.

conclusion

Browser problems have been our pain, front-end students often have to face, to solve. This is especially true if the user population is very diverse in browsers. We look forward to the future, to the integration and alignment of the great Unity. On the other hand, also verified the js powerful, as long as JS support, sooner or later to write with JS.

any application that can be written in JavaScript, will eventually be written in JavaScript.