preface

With the daily iteration of the project, the size of the project continues to grow, and the biggest impact on developers is in the development stage. The mainstream construction tool used in the industry is Webpack. It is necessary to start the local service to debug and modify the code, resulting in repeated compilation of the project, which is time-consuming and seriously affects the development efficiency and experience. All kinds of resource construction optimization means are countless, are the development of the precipitation of students.

Reducing the amount of processing resources is basically the fastest way to improve the construction efficiency. For example, for our MPA project, the configuration entry is provided directly, and the specified construction page is displayed to improve the efficiency of the development stage.

With the advent of ES Module based building tools such as Vite and Snowpack, there was a wave of ES Module fever in the community. At the time of Snowpack’s release, the team released an ES ModuleA Future Without Webpack”, which says you can try a whole new packaging solution. Its website describes the differences between the two packages.



(Snowpack website)

Using the ES Module

<body>
  <script type="module">
    import React from 'react';
    console.log(React);
  </script>
</body>
Copy the code

Using ESM is simple: declaring type=”module” on the script tag indicates that the script inside the tag uses ESM mode.

You can also see current support for major browsers in Caniuse.



​

Principle of building

As you can see from the above, Snowpack used Unbundled for projects during development. Each file needs to be built only once and then cached permanently. When a file changes, Snowpack rebuilds the individual file. Instead of wasting time packaging as a whole due to individual file changes, refresh instantly in the browser with hot updates.

This is why esM-based build tools are much faster than webPack builds. Of course, we can not only write JS in daily development, but also use JSX, TSX, less, images and so on in the source code. The browser can not directly use these resources.

Depend on the processing

NPM packages are distributed primarily using module syntax (common.js or CJS) and will not run on the Web without some build processing. Even using the browser’s native ESM import and export runs directly in the browser. Take Snowpack as an example.

  • Snowpack scans your project to find all used NPM packages.
  • Snowpack reads these installed dependencies from the node_modules directory.
  • Snowpack packs all dependencies into a single JavaScript file. For example, convert react and react-dom to react.js and react-dom.js, respectively.
  • Each generated file can be run directly in the browser and imported through the ESM import statement.
  • Because dependencies rarely change, Snowpack rarely needs to build them.

​

Snowpack converts all dependent statements to /web_modules/*.js.

import React from 'react';

/ / = >

import React from '/web_modules/react.js';
Copy the code

Image is introduced into

When working with image resources, you actually need to get the URI of static resources. Snowpack first overwrites the path of such resources

import logo from './logo.png';

/ / = >

import logo from './logo.png.proxy.js';
Copy the code

In the logo.png.proxy.js file, the corresponding file address can be exported by default:

// logo.png.proxy.js

export default '/src/assets/logo.png';
Copy the code

The style is introduced into

CSS resources are usually processed by programming JS modules that work by inserting style tags directly into the page. The rewriting rules for style imports are similar to those for images, except that *.css.proxy.js is generated.

// code is what is read in the CSS file
const code = ${JSON.stringify(code)};
const styleEl = document.createElement("style");
const codeEl = document.createTextNode(code);
styleEl.type = 'text/css';
styleEl.appendChild(codeEl);
document.head.appendChild(styleEl);
Copy the code

​

Hot update

Some specifications in the industry: Snowpack, Together with Preact and Vue, came up with esM-HMR Spec. Esm-hmr is a standard HMR API for ESM-based development environments. Esm-hmr is built for the browser’s native module system, so it can be used in any ESM-based development environment. Example:

export let foo = 1;

if (import.meta.hot) {
  // Receive any updates from the development server and update accordingly.
  import.meta.hot.accept(({ module }) = > {
    try {
      foo = module.foo;
    } catch (err) {
      // If you have problems accepting updates, mark them as invalid (reload the page).
      import.meta.hot.invalidate(); }});// Alternatively, clear any side effects in the module before loading a new copy.
  import.meta.hot.dispose(() = > {
    / *... * /
  });
}
Copy the code

summary

Based on the understanding of the above construction principle, the basic analysis of the construction mode based on ESM is completed. At present, this construction mode is indeed an incremental way to improve the development experience. In the production environment stage, JS bundles need to be packaged through Webpack, among which webpack-based hooks, plug-ins and loaders can greatly meet the various customized requirements of developers in the production stage.

reference