Summarize the experiences of using various new front-end technologies and APIs in the company's projects ., To sum up the api

Summarize the experiences of using various new front-end technologies and APIs in the company's projects ., To sum up the api

About ES6:

Note that some features and APIs of ES6 require a 200 k Polyfill to be supported. features such as for... of loop, generator, and API such as Object. assign. Our practice is to discard these features and introduce the corresponding API Polyfill separately.

 

About Webpack:

Webpack has a Code splitting function, which is recommended for split walls. The author of Webpack himself said that the reason for the new wheel was because other tools didn't have Code splitting.

When optimizing the package volume, we can see two possibilities: DllPlugin and Code splitting. Strictly speaking, these two solutions do not solve the same problem, but have different focuses.

DllPlugin can separate dependent libraries from business code to Improve compilation efficiency. Second, the packages produced by Business Code modifications are small and each modification is performed, you only need to reload a small package of business code. In the long run, it is very traffic-saving.

Code splitting loads dependency packages asynchronously. A bit like RequireJS. For example, if I have a requirement for page carousel and introduced a third-party library of dozens of k, but other pages are not used, I can use the Code splitting feature to load the library asynchronously. In this way, the database will be loaded only when the user accesses the feature page, otherwise the traffic will be reduced.

Considering that our launch is not very frequent, the traffic saved by DllPlugin is not obvious, so we first introduced the Code splitting solution.

 

Fetch and CORS: CORS is not a new technology, but it seems that due to compatibility issues, the industry is not used much, or it may be that I am ignorant. We consider using CORS as follows:

1: Fetch is used but Fetch-jsonp is not used.

2: All requests come from mobile terminals.

So we went to the Fetch + CORS solution. Here is a small note: When you enable CORS to send a non-simple request (not-so-simple request), the browser will initiate a pre-request (see: http://www.ruanyifeng.com/blog/2016/04/cors.html ), A pre-request must be a simple request, which is easy to understand: Before I send a non-simple request, if you need to ask whether the special fields contained in the server's non-simple request can be sent, you must not include these special fields at the time of inquiry. Otherwise, what is the significance of the pre-request.

 

What else can I do ..