Introduction to the

WEB isomorphic application refers to the compilation and transformation of code (usually by means of Babel) to make the code run on different client(browser) and server(server). Isomorphic Web applications have the following advantages:

  1. One set of code running in multiple places reduces maintenance costs
  2. Task splitting, more functionality can be achieved through isomorphism (SSR, fetchData)



Simple implementation idea

  1. Convert the client-side code into code that the server can execute (ES6 => CommonJS).
  2. Combine a set of code logic with the same pattern at both ends. The following example uses different components provided by the React-Router on the server and client.
  3. Server side routing match, assemble resources (CSS, JS, data), can be assembled by different middleware according to the request information.
  4. Client route match, match the resource (data, check whether the page rendering result is correct).

process

Code conversion

In the process of code conversion, it is necessary to understand the purpose of code conversion before making clear the conversion strategy for different files. For example, different processing strategies for different types of CSS files in order to achieve isomorphism and convert the client-side code into server-side code that can be run. The code conversion function is usually implemented by means of WebPack. Webpack will parse the referenced file types according to the entry file in turn, and the configured WebPack Loader can realize the conversion of the corresponding file types. The following are mainly introduced from the perspective of different types of file processing:

javascript

The target of the transformation is client-side code (excluding node_modules). Convert the client into code that the server can run

css

The CSS can be handled in the following two ways:

  1. Css-in-js (CSS-Loader style-Loader) processing, including node_modules. The CSS does not need to be extracted by the client
  2. Client-side global styles or styles extracted via the Mini-CSs-extract-plugin

Transcoding optimization

Public code extraction

You can use the DllPlugin to uniformly extract and reference the underlying component libraries you use. Extracting public module code has the following main benefits:

  1. Extracting public code through DllPlugin can accelerate the speed of webPack building code to some extent
  2. The public part of the logic is relatively unchangeable and can make full use of the cache
  3. By reducing the size of other bundles, the page loads fewer resources



Speed up compilation

You can use happyPack to speed up compilation. The happyPack is a multi-process process to speed up the packaging process. Example of using a happyPack:



Resource matching

Static resources (CSS JS)

You can use the Webpack-manifest-plugin to generate a location information file for a resource, and then use that file to find the location of the resource. Resource location file

Find the location of resources through the manifest

data

  1. The server executes the matching method to the component to get the data (return promise), and the primose executes to get the latest data store. Use a script to mount data to properties on the window.
  2. The client obtains the window property to generate storage data. The server gets data and injects data

    The client extracts data


thinking

When deciding whether to use isomorphic applications in a project, it is still necessary to combine the specific scenarios. The following considerations can be considered:

  1. Whether server-side rendering is required in the project => Consumer perspective
  2. Whether there is a need to introduce the Node midtier (API forwarding), whether other alternatives are feasible (nginx) => overall design perspective


                                            

Welcome to follow the public account, progress together