background

Recently, the whole Internet is pushing Vite, as if everyone is learning

With curiosity and awe of new knowledge, I began a Phaser project built on Vite.

About vite does what, directions: Vite principle analysis

What do we need to prepare?

  • node> =12.x.x

NPM is the taobao source. After all, when running NPM I, the initial dependency is 92MB.

Why? Advantage?

Brief analysis of principles, Phaser construction, Vite Compare Webpack

Unlike react and Vue, phaser can render and maintain its own canvas canvas independently. What is actually written in the business scenario is:

  • Game instance
  • scene
  • container
  • gameObjects
  • . And so on a list of single game vector classes

The range of collections decreases from top to bottom, and the official approach is:

1. It is recommended to use TS to maintain phaser projects. 2. Based on condition 1, after a game instance is created with game, any child elements of it are written in class.Copy the code

For example, vectors such as Scene, container and gameObjects can be inherited, as well as vector abstraction.

So it makes sense that Phaser is an all in typescript project

Since it is all in ts, so we are actually writing ts file, on the increase as the project, dependencies between classes and complex cases, gradually in the dev environment each time (the command | | CTRL) + s to save, can full quantity packaging a bundle. Js to browser, Even a change to console.log is a waste of memory and time.

For example, there are three types of file file relationships:

// a.ts
export default class A {};

// b.ts
export default abstract class B {};


// c.ts 
import A from 'a.ts';
import B from 'b.ts';

export default class C extends A implements B {}
Copy the code

Under the optimal conditions (regardless of translation and transcoding), if C files are used as the entry point and the completed file is packaged, it will form in the way of Webpack:

// bundle.js
class A {};
abstract class B {};
class C extends A implements B {}
Copy the code

How does Vite handle this dependency?

Once again, the C file is the entry point, and if an import is read, the import module path is overridden and an HTTP request is made. The KOA middleware processes the static resource and returns it.

In the above process, there is no full bundle caused by a single change at all.

Vite provides a listening-parse-reload mechanism that is highly dependent on ESM relationships. Although it does not provide a more detailed dismantling of the internals of *.vue and *.tsx files, this approach is desirable and can theoretically improve the speed of dev environment compilation projects.

How do you build an All in TS & on Vite Phaser project?

When creating with NPM init. vitejs/app ‘projectName’, choose one of the familiar templates. For example, I prefer Typescript development to vue+ TS.

/ / the node > = 12.0 x
// Create the initializer project template
npm init @vitejs/app `your project name`

// Select the template
Copy the code

// Start the project
npm i && npm run dev

// Enjoy lightning-fast development
Copy the code

Using perception? Intuitive comparison

Fast? It’s really fast!

We tried to build two Phaser project bases using Vite and Webpack, respectively, and initialized only one base scene.

Without the introduction of HSWP (HardSourceWebpackPlugin) read/write cache, the compile-load speed is:

  • vite:563ms
  • wp:1490ms

Attach the base project dependency file relationship:

Problems encountered

The above implementation phaser project is based on the development of [email protected]. I tried to upgrade the official version [email protected], but encountered an error referring to CJS global module variables. I hope you can answer my question.

conclusion

The above is the whole process of learning vite and using it, and there are many points worth learning, such as:

  • esbuildWhy are builds fast? (Go compilation cost binary, translation, low memory consumption, ensure the first principle of “compilation speed”;
  • Koa middlewareHow to deal withThe SRC fileornode_modules
  • viteandreactHappy combination of (later updates
  • , etc, etc.

The above technology in nuggets has a lot of excellent authors to understand reading, analysis, no longer teach fish to swim, the following attached link for everyone to learn together.

Esbuild: The next generation of packaging tools esbuild

Analyze the Koa middleware mechanism line by line