With the development of front-end modularization, modularization in nodeJS field can be divided into common.js, UMD and ES Module. Among them, UMD is compatible with browser, common.js can only be run in nodeJS environment, and ES Module is a front-end module belonging to the future, which can meet the requirements of both server-side and browser-side code writing. Es Module is also the most common mode for front-end engineers to write code. Modular writing is not unfamiliar to us, but also an important direction of development in the future.

It is written as follows:

import fs from 'fs';
Copy the code

Different from common.js:

const fs = require('fs');
Copy the code

Esm import is also supported in browsers, but compatibility is not good. Based on the Lukeed/Dimport compatibility scheme, we can use this property in most browsers. The esM import of browsers brings us into a whole new era (the era of synchronization between server modules and browser modules) known as the Bundleless era (or Bundleless if you like). Combined with Bundle Free, you can eliminate unnecessary code packaging and take advantage of every ounce of browser performance.

<! -- DimPort compatibility -->
<! -- Load the "module" version on browsers that can support it. -->
<script type="module" src="https://unpkg.com/dimport?module" data-main="/bundle.js"></script>
 
<! -- Load the "nomodule" version on older Browsers - acts as fallback! -->
<script type="nomodule" src="https://unpkg.com/dimport/nomodule" data-main="/bundle.js"></script>
Copy the code

ESM Import

In fact, Polymer/ lit-HTML was one of the first to introduce ESM Import to the front of the page, modularizing the template and bringing it directly to the browser. It then inspired preact’s tweaks to create developit/ HTM grammars based on Tagged_templates, so that JSX grammars can be used directly in browsers, while losing some of the appeal of rendering functions. A new JS string template feature that replaces JSX but allows Preact to run directly in the browser made a big impact.

<! DOCTYPEhtml>
<html lang="en">
  <title>htm Demo</title>
  <script type="module">
    import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.module.js';

    class App extends Component {
      addTodo() {
        const { todos = [] } = this.state;
        this.setState({ todos: todos.concat(`Item ${todos.length}`)}); }render({ page }, { todos = [] }) {
        return html`
          <div class="app">
            <${Header} name="ToDo's (${page}) "/ ><ul>
              ${todos.map(todo => html`
                <li key="${todo}">${todo}</li>
              `)}
            </ul>
            <button onClick=The ${() = >this.addTodo()}>Add Todo</button>
            <${Footer}>footer content here<//>
          </div>
        `; }}const Header = ({ name }) = > html`<h1>${name} List</h1>`

    const Footer = props= > html`<footer .${props} />`

    render(html`<${App} page="All" />`.document.body);
  </script>
</html>
Copy the code

The esm on the browser can support the relative path and remote HTTPS path. The premise is that all static resources must be in the service and cannot be imported as file paths, such as file:// resources. This is also for the security of script resources.

With the increase of Chrome’s share, as well as the unification and maturity of mobile browsers, the fact that modern browsers support ESM means that the future of the front-end framework is gradually closer to the browser native. Front-end engineering brings us to the stage of packaging and compilation, JS is compressed into a file, variables are confused, but packaging compilation speed and packaging volume is always a topic we can not do without. The development of WebPack has reached a plateau where project build costs are limited by computer configuration and performance.

The advent of ESM Import means that JS resources can be applied directly to the browser, but it’s also becoming more fragmented, with lots of volatile resources that can be imported externally. With parallel references to multiple resources, HTTP2.0 addresses the problem of concurrent resource performance, and the trend toward ESM Import and Bundle Free for resources is consistent with the evolution of modern browsers.

Bundle Free

In the industry, the main implementation of Bundle Free is Vite and Snowpack. Yu Yu Creek has gradually changed the engineering of VUE3 into Vite, which is the opposite of VUE-CLI3. Vue-cli3 is more of a deep encapsulation of Webpack. The biggest problem with Webpack is the issue of packaging performance, if MPA, you can improve packaging efficiency by reducing the number of packaging entries. However, if your project is an extremely large SPA, since you are not a multi-page framework (MPA), when your page has a file change, you need to rebuild a whole bundle. Even if you use Happypack or Threadloader to squeeze every inch of the performance of the computer, Can’t achieve efficient development efficiency.

Vite is an implementation of Bundle Free, which is designed to reduce compilation time because Bundle Free works by allowing each file to be an independent import. The Node and browser files are basically equivalent. Whenever a file is changed, only one of the files needs to be replaced. So it has a very good experience in the development of large business projects.

Since Vue is different from rendering functions, much of the syntax is template convention. For those familiar with vUE, it has a compiler that converts the template into createElement functions that can be run directly in the browser. Each individual VUE file is converted into a corresponding JS file that runs directly on the browser. The basic principle of Vite is to convert modified files into JS files during local debugging and then Import them into local projects through ESM Import. Vite2.0 already supports partial prepackaging and react. It can encapsulate some common. Js NPM dependencies into ESM modules to ensure the availability of third-party repositories.

Of course, vite has a compromise. In production mode, Vite still uses rollup packaging to convert the code to old browse-compatible mode for compatibility reasons. The only downside is the increased disparity between development and production environments. So experienced front end engineers need to take a look back at compatibility issues when using Vite.

Snowpack also uses development mode Bundle Free, while production mode still provides Bundle optional mode. This shows that Bundle Free is not entirely suitable for production environments.

advantages

  • SPA development efficiency is high, each page is independent
  • Matches concurrent browser http2 requests
  • Corresponds to the ESM Import of the browser
  • Coincides with deno’s ESM Import
  • Rely on clear

disadvantages

  • Compatibility is not good, production or consider packaging mode
  • Loading efficiency issues if production uses bundle-free
  • All dependencies meet ESM requirements (ANTD does not, vite2.0 already supports some pre-packaging mechanisms)
  • Inconsistency between development and production

A vision of the future

As a front-end engineer who has come from Jquery, you will understand that the previous browsers were less modular, there was no front-end engineering, all the resources were statically imported, and the maintainability of front-end projects was very weak. But the structure is clear and the cost of learning is very low. In the second era, which is the era of front-end engineering led by Webpack, the front-end project has become a JS file, with various tools emerging in endlessly, and the learning cost is very high. After 2020, there may be a third era, which is bundle-free or Bundleless. Some front-end projects may return to the state of direct reference, and some projects are mixed dependency, which brings another possibility for front-end performance optimization to another extent.

  • Stage 1: Jquery Era (Direct dependency)
  • Stage 2: Front-end engineering (packaged dependencies)
  • Phase 3: Bundle Free? (Mixed dependency)

The resources

  • Snowpack 2.0
  • The Third Age of JavaScript
  • Using ES Modules in the Browser Today
  • Vite and Webpack performance comparison video

digression

Shopee, also known as Shrimps, is a cross-border e-commerce platform invested by Tencent. There is less overtime and a good technical atmosphere. If you want to work with me and learn together, you can ask me to push inward. Email [email protected], if you are the one.