Interview Question Explanation (12) --vue【Cachelader, vite & snowpack Principles】

cacheloader

Problem: As business code continues to increase and project depth continues to extend, our build time will continue to increase. GraduallyvueProject compilation time becomes longer

##Optimization Method

SomeperformanceAdd cache-loader in front of loaders with high overhead to cache the results on disk to reduce compilation time
refer to

vite & snowpack principle

Nuggets Reference Vite
Nuggets Reference Snowpack

vite

The main feature of vite is the browser native ES module (/en-US/docs/Web/JavaScript/Reference/Statements/import) for development, omit the packaging step, because any resources are needed can be directly introduced in the browser.
vite - A web development tool developed by vue author You Yuxi, which has the following characteristics:
refer to
1. Quick cold start
2. Instant module hot updates
3. Real on-demand compilation

snowpack

Nowpack is a lightning-fast front-end building tool designed for modern web. It is a replacement for heavier and more complex packaging programs such as webpack or Parcel in the development workflow. Snowpack leverages JavaScript's native module system (called ESM) to avoid unnecessary work, keeping it fast no matter how big your project is.
Once you try it, it's impossible to go back to anything else.
From this introduction, we can see that the characteristic of Snowpack is - fast!

The core goal of the initial version of snowpack was to no longer package business code, but to directly use the browser's native JavaScript Module capabilities.
So from its processing flow, for the business code module, you basically only need to publish (copy) the ESM to the publish directory, and then change the module import path from the source code path to the publish path.

For node_modules, the dependencies in node_modules are packaged as granular by traversing the dependencies in node_modules. Use the entry of each package in node_modules as the package entry, and userollupGenerate the corresponding ESM module file, put it in the web_modules directory, and finally replace the source code import path, so that the package in node_modules can be loaded through the native JavaScript Module.

- import { createElement, Component } from "preact";
- import htm from "htm";

+ import { createElement, Component } from "/web_modules/";
+ import htm from "/web_modules/";