This is the second day of my participation in Gwen Challenge

I worry

I was introduced to the front end in 2017, with commonJS, AMD, RequireJS, etc. Before the browser supported modularity, we generated static resources for the project by packaging modularity.

As I worked longer, the project introduced more and more modules and wrote more and more complicated pages, which dealt a huge blow to my development efficiency.

For angular projects I maintain, angular’s own “wrap” and “hot update” features are excellent, but because of the amount of code involved, it now takes about 20 seconds for a hot update to complete, and even more than a dozen minutes for a package.

Why does Vite treat all code as native ES modules?

As JavaScript programs on Web pages became more complex, browsers began to support modular functionality natively. Browsers can optimize loading modules to make them more efficient than using libraries: libraries often require additional client-side processing.

ViteWe are trying to solve this problem with native ES modules.

In the source code, Vite uses ESbuild to convert other modules (CJS, AMD,require) into ESM modules. In this process, the Vite self-analysis module divides the modules converted to ESM into entry modules and dependent modules, and caches them in the node_modules/. Vite folder.

When the page is accessed later, only the modules required for the current route are imported and will rely on the modules for strong caching. For example, when I visit page A and load AXIos (I need to get the data from the backend brother), and when I visit page B, my colleague also needs Axios, so the module that has been loaded will be directly used.

When we do hot updates, Vite provides a set of NATIVE ESM HMR apis through which we can directly replace the native ESM when editing files.

JavaScript Modules

ESM relies on import and export, and needs to set type to module within script tags.

<script type="module" src="index.js"></script>
Copy the code

The sample

Let’s write an example using the native ES module.

Index.js, a js file of type module, was introduced in index.html in the directory

// ./index.html

<body>
    <div id="test-div"></div>
    <script type="module" src="./index.js"></script>
</body>
Copy the code

ESM relies on import and export, which we use to introduce methods and variables.

In the code folder edit.js, export exports a method called editName that modifies the contents of the page.

// ./code/edit.js
export const editName = (eleId, name) = > {
        document.querySelector(` #${eleId}`).innerHTML = name
}
Copy the code

From name.js in the code folder, export a variable name.

// ./code/name.js
export const name = 'Kev1nzh'
Copy the code

Finally, in the imported index.js file, connect the exported variables and methods and run them.

// ./index.js 

import {name} from './code/name.js'
import {editName} from './code/edit.js'

console.log(name)

editName('test-div', name)
Copy the code

After opening, you can see the modified page.

The last

Introduce the next reading Vite source record project, click my site jump

Better online document viewing experience

After reading helpful can enter github give me a 🌟 small star thank you!