❝

Frontier: Good luck with the nuggets upgrade… Tree sauce jun is a dregs, comb found or quite a lot of knowledge is not solid, children shoes have the opportunity to regularly give themselves a review and review, comb their knowledge system. In addition, the front end entertainment industry is changing so much that we need to strengthen the basic knowledge of the bottom, to catch up with the gaps, but also keep curious to explore new things. How do I construct my body of knowledge? (special algorithm is hard) ⏰ this chapter for the next two chapters, this sharing is the last chapter

❞

1.Vue knowledge system


1.1 Basic Principles

1.1.1 Vnode

❝

A Vnode, also known as a virtual node node, is an abstraction of real elements. The background is that the front end has been modifying views by manipulating the Dom directly for a long time, and as the project grows, maintenance becomes an issue. Another way to think about it is to abstract the real Dom tree into an abstraction built in JS syntax, and then re-render it to the view by modifying the structure of the abstract tree to convert it into the real Dom.

❞

  • How do I generate a virtual node? :createElement()In-depth practical learning, can read the tree jam before writingDevelop dynamic forms from 0 to 1
  • How does Vnode detect changes and update views?The diff algorithm

🌲

  • About the render function
  • VNode node and VNode class definition in Vuejs
  • Vue implementation of the diff principle

1.1.2 nextTick

❝

The purpose of nextTick is to delay the call of the callback function until the next DOM update. In other words, the DOM is not updated immediately after the data is modified. Dom updates are asynchronous and cannot be obtained through synchronous code, so nextTick is required. In the next event loop (Dom updates in Vue are asynchronous)

❞ 

this.msg = "Hello world."
✅ this.$nextTick(() = > {    this.msg2 = this.$refs.msgDiv.innerHTML
  })
🚫 enclosing msg3 = this.$refs.msgDiv.innerHTML
Copy the code

🌲

  • Vue. Js asynchronously updates DOM policy and nextTick
  • Do you really understand $nextTick

1.1.3 MVVM

❝

MVVM is called model-view-view-model. The background of MVVM is that in the traditional MVC architecture, there is a lack of a role for data parsing, and M, V, C and so on should not deal with data parsing, so a new class was created specifically for data parsing: ViewModel, mainly used to associate Model and View, data changes update View, View changes update data

❞


🌲

  • Liao Xuefeng: What is MVVM?
  • 50 lines of MVVM, feel the art of closures

1.1.4 Principle of bidirectional binding

❝

MVVM, mentioned in the previous section, is essentially vUE data bidirectional binding, which combines the publisher-subscriber pattern in design pattern with data hijacking and consists of the following steps

❞

  • 1. Make data observable: PassObject.defineProperty()Setters and getters for properties are set to listen for changes in data, dependency collection is done through getters, and each setter method is an observer, and moreObject.defineProperty()Practice can read tree jamHow to better manage the ApiUsed by Vue3.0ProxyAlternative)
  • 2. Add subscriber Watcher and add message subscriber Dep (notify all subscribers if data changes)
  • 3. Realize the Compile

🌲

  • Vue responsive principle
  • Exploration of Proxy – based observer mechanism

1.1.5 Vue related apis

❝

Vue exposes some commonly used apis, including global, life cycle, composition, instance property, etc. You can check the official Vue API collection document

❞

  • Global API: For exampleVue.use( plugin )For global reference plug-in, specifically using the readable tree sauce
  • Composite apis: For exampleproject/injectUsed to allow an ancestor component to inject a dependency into all of its descendants
  • Instance Property API: For examplevm.$refsGets all DOM elements and component instances that hold the registered REF attribute

🌲

  • Discuss the application of provide/ Inject in Vue
  • You may not know these tips from Vue

1.2 VUEX Status Management

❝

Vuex is a state management tool specifically developed for vuue. js applications. It uses a centralized storage method to record the state of components. A single object contains all application-level state, and each application will only contain one store instance, but can be managed with modularity

❞

1.2.1 Modular status management

❝

Due to the single state tree of VUEX, as the application is huge, the state set to be managed by the application will be large, and the store object will be bloated and difficult to manage. Therefore, Module differentiation is needed, and each Module has its own state, mutation, action and getter

❞

🌲

  • Vue official: Module management of VUex

1.2.2 Persistence Management

❝

We can use state persistence to implement cache state because vuex data is stored in memory. When we refresh the page, the memory is deleted. If we want to store some data persistently, we need to rely on localStorge or Vuex-PersistedState

❞

  • Manually leverage HTML5’s local storage (LocalStorge)
  • Use vuex-PersistedState

🌲

  • Vuex persistence plugin – Solve the problem of missing refresh data

Note: By default, each commit writes data to localstorage. Writes to localstorage are synchronous, which affects performance. Therefore, frequent writes to persistent data should be avoided in different scenarios.

1.2.3 Five attributes of VUEX

  • State: basic data of vuEX, used to store variables

  • Getter: Data derived from base data (state), equivalent to the computed property of state

  • Mutation: Method of submitting updated data, which must be synchronous (use action if asynchronous is required).

  • Action: An action commits mutation and can contain any asynchronous operation, but cannot directly change the state

  • Modules: Vuex modularity mentioned in section 1.2.1

1.3 the vue – the router

❝

Most SPA applications control the jump of the page by the front-end route. Through the SWITCH of URL, the page view is updated on the premise of not requesting the server. Vue applications cannot do without VUe-Router

❞

  • How is hash mode different from History mode?
  • How should route interception be done?
  • How to implement modular routing management?
  • How does keep-alive cache components?

To learn more about vue-Router, read tree jam’s 🌲 front-end routing

  • Vue routing keep-alive on demand

1.4 Component Development

❝

The development of Vue components is to extract and encapsulate components with high reuse rate by decoupling fragments from business codes. The contents involved in knowledge include the following

❞

  • What are the three important reasons for Vue components?Props, Events, and slots
  • How do components communicate with each other?
  • How to use the Vue componentized slot?
  • What role can mixins play in components?
  • What are the Vue higher-order components?

1.4.1 Communication and value transfer between components

❝

The communication between Vue components can be: parent-child relationship, parent-child relationship, or sibling relationship. Different relationships also mean different ways, mainly including the following ways:

❞

  • $parent and $children
  • $emit
  • bus $eventBus: Event bus, passOn to complete the transfer and reception
  • Dojo.provide and inject
  • Props and $refs

🌲

  • There are six ways to communicate between Vue components
  • Vue Component Communication Full Disclosure (7 chapters)

1.4.2 Slot Slot

❝

The slot element is used as an outlet for distributing content. The slot element is pre-positioned by the sub-component, which then writes the corresponding information according to the needs of the business scenario

❞

🌲

  • More on vue-Slot

1.4.3 mixins with

❝

Mixins provide a very flexible way to distribute reusable functionality in Vue components by allowing multiple components to share data and methods. When a component is introduced into a mixin, the methods and properties of the mixin are incorporated into the component and can be used directly. The hook function will also be called in both cases (the hook in mixins is executed first)

❞

To learn more about mixin practices, you can read tree jam’s 🌲 component library source code. For the use of component library mixins

1.4.4 Advanced Components

❝

Higher-order components, also known as HOC, are described as a way to share common functionality between components without repeating code. The purpose is to enhance the functionality of the component, which is simply defined as: you pass in a component to a method and then return a new component, which is HOC

❞

🌲

  • Vue advanced must learn the higher order component HOC
  • Explore Vue higher-order components
  • Vue HOC high-level component practice

1.5 axios

❝

Applications can’t do without request libraries, and the most talked about request libraries in the Vue stack is AXIos, an HTTP client based on promises for browsers and NodeJS, which includes the following

❞

  • How does Axios do secondary wrapping (interceptor)?
  • How to do API management with AXIOS?
  • How does Axios cancel a request?
  • How do expired tokens refresh in Axios?

For the first three you can read tree jam 🌲 How to better manage the Api

🌲

  • Talk about the encapsulation of AXIos in Vue
  • Encapsulate axios interceptor to refresh access_token without user feeling

1.6 the vue – cli

❝

Vue-cli is the official vUE scaffolding that allows you to quickly build projects using vuE-CLI. It also provides support for Babel, TypeScript, ESLint, unit testing, and so on out of the box, simplifying deployment, packaging, code scanning, unit testing, and so on

❞

  • How do I deploy a project based on VUE-CLI?
  • How to configure vue.config.js to package the best performance applications?
  • How is local development cross-domain resolved?

1.6.1 VUE – CLI Deployment project

❝

Front-end deployment requires several environments, including local, mock, development, test, pre-production, production, and so on. You need to define different configuration files (management apis, etc.), define compilation scripts (scripts in Packjson), and pay attention to whether the definition of PublicPath needs to be changed

❞

To learn more, read Treejam’s vue-CLI 3X project deployment at 🌲

🌲

  • Vue official: Environment variables and patterns
  • PublicPath configuration

1.6.2 Configuring optimal packaging

❝

The front-end SPA application online server is essentially a compiled static resource upload, so compilation packaging is a factor that affects performance greatly, so how to configure vue.config.js packaging performance is the best, you can read section 4 webpack configuration plug-in, mainly to solve these problems

❞

  • Optimize for number of requests: (remove prefetch)
  • Public code extract, loaded using CDN: (config.externals)
  • Configuration code compression

🌲

  • This is how I configured the Vue in my project

1.6.3 Developing devServer locally

❝

Cross-domain issues in local development? We can do echo proxy solution through the devServer configuration in vue.config.js! How to do? Look at this one

❞

🌲

  • DevServer configuration in vue.config.js

2. Engineering knowledge system


❝

About front-end engineering, which is essentially about improving the quality of front-end applications through specifications and tools, we’ve covered this before. For more information, please read 🌲 about front-end engineering. This article expands and complements the original article

❞

2.1 the Git

❝

As we all know, Git is not only a code management tool, but also can do branch management, commit message verification, Pull Request, etc

❞

🌲

  • Some Git rules and Git workflow

  • Gracefully Commit your Git Commit Message

2.2 Npm

❝

Will only NPM install? NPM actually provides many functions including the following common ones

❞

  • npm publish: Packet delivery management
  • npm link: used to establish a connection between a local project and a local NPM module, which can be tested locally

🌲

  • Vue components publish NPM best practices
  • 13 NPM Quick Development Tips

2.3 Building Tools

❝

There are many front-end project building tools including Rollup, Webpack, and Parcel, but recently in the Vue.js 3.0 Beta, You mentioned vite a lot. Can vite replace WePack?

❞

  • Webpack: Suitable for large-scale project construction: Webpack has the most perfect ecology, more application scenarios, high community popularity, and a powerful loader and plug-in ecology
  • Rollup: Library packaging: Modules can be packaged into a file, tree-shaking to remove useless code and reduce the size of the code, but without the powerful plug-in ecosystem of WebPack, positioning is better for library-focused packaging
  • Parcel: For testing: Although it has the advantage of no configuration, it can package applications quickly and efficiently, but it does not have tree-shaking, resulting in large output files

🌲

  • Analysis of Vite principle

2.4 CI/CD and project deployment

❝

Since DevOps, continuous integration, continuous delivery (CI/CD) has become the mainstream of project deployment, front-end SPA project deployment needs to package 📦 application, we can combine Jenkins + Docker + Nginx to complete, if it is SSR application also need to use PM2 to manage the process

❞

For more information, read tree Jam’s 🌲 about front-end operations and maintenance deployment

🌲

Shanyue yamatsuki’s column on DevOps and engineering

  • How do I deploy a front-end project using Docker

  • The history of front-end deployment

3 Node knowledge system


❝

For those of you who are interested in what interviewers ask you about Node (basic) and what interviewers ask you about Node (Advanced), we’ve compiled two previous articles about Node. At the same time, there are few working and business scenes of Node, and the Node system of Shujiang is relatively small, which will be adjusted and supplemented later. It may not be suitable for high-grade children’s shoes at present.

❞

🌲

  • Helps you understand node for front-end tools
  • Build your NodeJS body of knowledge in one article

4. Performance optimization


4.1 Performance Specifications

❝

Performance indicators are used to measure application performance by obtaining data. The following performance indicators are commonly used

❞

We can also test our current application with lighthouse

  • FCP: First content drawing
  • FMP: First valid drawing
  • TTI: First interaction time

The following screenshot is loaded on a mobile phone page to help us understand the experience brought by the performance indicator point in time

🌲

  • Lighthouse Testing Insider
  • How does Ant Financial monitor front-end performance to the extreme? (https://www.infoq.cn/article/Dxa8aM44oz*Lukk5Ufhy)
  • User-centric Performance Metrics

4.2 webpack

4.2.1 Code segmentation

❝

In business scenario, the project may introduce a lot of third-party libraries, the libraries may has nothing to do with the business and the content may also be the same, if all packaged together, the user through the browser to browse the latest results must be performed a new file, if you can put the same code alone into a file, and file name every time. Then the browser can read from the cache, rather than re-initiating the request or de-duplicating the common part, where code splitting plays an important role

❞

Webpack uses SplitChunksPlugin to re-chunk and separate chunks, whereas in vue-CLI 3 it is necessary to configure splitChunks in chainWebpack in vue.config.js as follows:


🌲

❝

To quote: The essence of code splitting is to find a more realistic middle ground between the extremes of “live source code” and “bundle as a single script main.bundle.js” ** in exchange for a better user experience with an acceptable increase in server performance.

❞

  • Webpack official: Code separation
4.2.2 UglifyJs compression

❝

Compress JS files through UglifyJSPlugin, so as to reduce the size of JS files and speed up the loading of resources. However, it is generally enabled in the production process, because it will slow down the original compilation speed of Webpack

❞


Holdings gizp compression

❝

We can compress it using the compression-webpack-plugin, which is equivalent to gzip

❞

We configure the configureWebpack in vue.config.js under vue-CLI 3 as follows:


4.2.4 Tree – shaking

❝

Tree-shaking, also known as Tree shaking, was introduced in WebPack 2 and was originally unique to Rollup. Used to remove useless code. Tree-shaking is based on the static nature of ES6 Modules, that is, you can use tree-shaking only if you use ES6 Modules

❞

🌲

  • How do you evaluate the new tree-shaking code optimization techniques introduced in Webpack 2?

4.2.5 webpack – bundle – analyzer

❝

During development, production, or development environment, we want to compare analysis reports for performance optimization to determine whether the performance of vUE projects has been improved. We can configure the webpack-Bundle-Analyzer plug-in, which can graphically show the size of each component of the bundle. NPM run build –report

❞


🌲

  • Vue-cli3 configures the webpack-bundle-Analyzer plug-in

4.3 Nginx

❝

Nginx optimizes performance with the following considerations:

❞

  • How to configure Gzip in Nginx?
  • How do I tune expires caching?
  • How to optimize performance in load balancing?

Learn about Nginx systematization by reading about Nginx in tree sauce

4.3.1 Gizp

❝

After Nginx gzip is enabled, the size of static resources is greatly reduced, which saves a lot of bandwidth, improves transmission efficiency, and brings better response and experience

❞


4.3.2 Setting the Static Resource Cache

❝

Some static resources update infrequently or don’t update expires. You can optimize performance by setting expires to set the cache time.

❞

Suppose I want to cache images from a Web application for a week. You can configure this in Nginx so that resources within a week after the configuration will only access the browser’s resources instead of requesting nginx


  • 🌲 front-end caching stuff

4.3.3 Load Balancing

❝

It is well known that the other server load balancer can be distributed to the user, to increase the site stability and response speed, and load balancer has four kinds of commonly used way, to mention here is that the response time to allocate pattern, allows multiple servers competition, find out the fastest corresponding to the user, and returns the content configuration is as follows

❞


🌲

  • Nginx performance optimization points under high concurrency!

4.4 other

4.4.1 Prefetch

❝

Prefetch is the rel attribute value in the link element that allows the browser to load resources that may be used by the next page. To accelerate the loading speed of the next page, common application scenarios in SSR, preload is used to load the resources of the home page, but prefetch is used to load the resources of other routes on the home page. Then what is the difference between the two? Look at the following

❞

  • preloadIs to tell the browser that the page must require resources, but the browser must load those resources
  • prefetchIs to inform the browser that the page may need resources, but the browser may not load those resources

🌲

I found that the number of requests increased because my page was prerendered with other components, and I don’t want to preload, what should I do?

❝

You can delete preload and prefetch in vue.config.js

❞


What is dnS-Prefetch? Is it the same as Prefetch?

❝

Suppose we visit Baidu.com now, at this time, DNS needs to convert the domain name into the corresponding IP address first, which is very time-consuming. You can use DNS prefetch to analyze the domain names of the resources required on the page and convert these domain names into IP addresses in advance when the browser is idle to reduce the number of DNS requests and perform DNS prefetch

❞ 

<link rel='dns-prefetch' href='http://baidu.com'>  
Copy the code

4.4.2 defer and async

❝

Defer and Async are the two properties in the configuration Script tag. The usage scenario is to control the download and execution of the script without blocking the dom document tree parsing of the page. What’s the difference between the two

❞

  • defer: Execute after rendering. After loading, wait for the page to load before executing the code
  • async: The script is automatically executed after the download is complete

🌲

  • 🌲 front-end JS-SDK stuff

4.4.3 SSR and Prerender

❝

Pre-render is not recommended because if you have a lot of routes in your project, for example if you have 1000 articles that need to be pre-rendered, it’s not realistic to perform pre-render every time you update them

❞


🌲

  • Decrypt all CSR, SSR, and Prerender principles
  • Nuxt Vue SSR solution

4.4.4 Anti-shake and throttling

❝

Function throttling and function buffeting are used to limit the number of times the function is triggered to solve the problem of lag and delay caused by function triggering too often. This is called front-end performance optimization.

❞

  • Stabilization debounce: prevents jitter. Applicable scenario: The same practice is triggered multiple times within a short period of time.
  • Throttling throttle: Similar to valve control, the valve will be opened periodically. After the function is executed once, it will fail to close within a period of time, and will be re-activated and opened after a time

🌲

  • What are anti-shake and throttling, and what are their application scenarios

4.5 Load on demand

❝

For example, if there are many images on a page, the performance will be affected if all images are loaded after the page is loaded. Isn’t it nice to scroll the images to the visual area and load them again? For example, if you have a long list of data, loading dom data down without limit, redrawing it every time, which has a huge impact on performance, creating a container on the page as a viewable area, displaying part of the long list in that viewable area, and then only in that area doesn’t taste good?

❞

4.5.1 vue – the lazyload

❝

About vue-lazyload can read tree jam chat front-end load on demand – picture lazyload

❞

4.5.2 Dynamic Component Loading

❝

You can read about component dynamics in tree sauce about front-end load on Demand – component load on Demand

❞

4.5.3 Virtual List

❝

Virtual list is actually an implementation of on-demand display, that is, rendering only the visible area, not rendering or partial rendering of the data in the non-visible area, so as to achieve extremely high rendering performance.

❞

🌲

  • vue-virtual-scroller

  • A neat, fun infinite drop – down scheme

  • Talk about the realization of the front end virtual list

Please drink a cup 🍵 remember three even oh ~

1. Remember to give 🌲 sauce a thumbs up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨