The cause of

The official website of our company is going to be revised this time. Since browsers above IE9 need to be supported, we used EJS for development before, but found that EJS does not support many writing methods, like some templates are not convenient to reuse, this time we plan to find a new framework for development. So my colleague recommended Svelte to me, and I immediately picked it up. It was very suitable for this scene development, so I decided to use it for the development of the official website.

advantage

Less code

The writing in Svelte is designed to be more user-friendly and can be developed with less code than other frameworks. The Svelte website provides an example when declaring a component’s state:

This is the code for React

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}
Copy the code

This is the code for Svelte

let count = 0;

function increment() {
  count += 1;
}
Copy the code

React is much cleaner than React, and feels just like the JavaScript we usually write, much easier to read.

No Virtual Dom

We all know that Vue and React use the Virtual Dom to update the Dom. The Virtual Dom changes the page Dom into a tree structure and stores the data in the memory. Each time the state of a component is modified, a new Virtual Dom is generated and compared with the old Virtual Dom to generate a patch. When the real modification is completed, the real Dom node is updated. Of course, the Virtual Dom in the framework is much more complicated than what I’m talking about.

But the Svelte modification update Dom node uses a pure javascript implementation that doesn’t rely on any framework. Because Svelte does not rely on the Virtual Dom, it is much less laborious to initialize and update, making pages up and running much faster.

Packaging volume is smaller

Examples like Vue and React are runtime based frameworks, and packaged code contains its own Runtime code. Svelte, on the other hand, reduces runtime code at compile time and minimizes runtime code contained in packaged code. Also, as described above, it is not based on the Virtual Dom, so Svelte packs much smaller code than other frameworks.

responsive

Svelte also implements a state response like Vue, where the component updates when a state changes the state. This allows us to better encapsulate components. It is written just like a normal variable declaration, but Svelte automatically injects responsive code for you at compile time.

count += 1;
Copy the code

Svelte automatically adds responsive code at compile time

count += 1; $$invalidate('count', count);
Copy the code

Why Svelte

Virtual Dom can bring very good performance improvement in complex interaction and rendering, and can reduce the number of restreams and redraws for page rendering.

But the official website is usually a static page, used to show people how the company is growing. There are usually not some very complex interactions and renderings, but more images and text content.

However, using Virtual Dom for simple interaction does not bring good results, because it is unnecessary to update the Dom through complicated Diff work in the Virtual Dom after modifying the Dom node. Therefore, Virtual Dom is not very needed.

Then the size of the code packaged with Svelte will be much smaller, which will have a good SEO and user experience improvement.

I also found that Vite also supports Svelte, which can double the development efficiency.

The implementation process of pre-rendering

However, I found that Svelte only supports JS rendering and SSR rendering, because the content of the page visited by our official website is fixed every time. Therefore, SSR is not needed, but it can not be JS rendering, because the official website pays great attention to SEO, and the website content needs to be captured by SEO crawler. When the page is JS rendering, The SEO crawler will not understand the JavaScript and will not crawl our page.

To do this, we need to render everything locally before deploying the page to the server. This is also called pre-rendering. The rendered HTML content is displayed directly when the user opens the page.

The implementation uses the Vite packaging tool, but the idea is the same if you use Rollup or Webpack.

The flow chart

  • Step 1: Vite build

To compile the rendered version of JS, in order to get the compiled page and the required resources, I have them exported to the dist folder. PageA and pageB are two pages respectively, and assets is the folder of the required referenced resources in the packaged page.

  • Step 2: Vite build — SSR

After compiling, I exported them to.ssr folder to get js file of render function of each page. In fact, pagea. js and pageB.js are the render function JS files of these two pages that can be used on the server. When you call the render function, you get the HTML string of the rendered page

  • The third step is to execute /script/ generation.js

This is my own js script, in fact, the process is very simple

First of all, I will put a comment in the HTML body of each page before step 1 to replace the HTML string after calling the render function.

<body>
    <div id="app">
       <! -- Temporary to be replaced by rendered HTML -->
      <! -- ssr-body -->
    </div>
<body> 
Copy the code

This is the flow of execution for this script

  • The fourth step is to compress the HTML using gulp

  • The final results are all in the /dist folder

GitHub

This is the project template I used for this development.

If you’re interested, you can go directly to the GitHub project and see the implementation code, which is actually very simple.

Github.com/Feng3737121…

conclusion

Still remember yu Yuxi in a Zhihu Live did not mention the scene contrast frame is playing rogue.

Svelte is worth trying to develop scenarios where static pages are available or where there are not many complex interactions.

However, for medium and large projects, the framework of Vue and React may be more advantageous.

I hope you can choose the most suitable framework for your project.