Talking about the on-demand loading of the Vue project optimization (Vue + WebPack)

When using the single page application written by VUE, there may be many routes introduced. When the package is built, the JavaScript package becomes very large and affects loading. If we can divide different routes into different code blocks, then load the corresponding components when the route is accessed, which is more efficient. This will greatly increase the speed of the first screen, but the speed of other pages can be lowered. Combined with Vue asynchronous components and WebPackDe Code Splitting Feature, easily implement lazy loading of routing components.

Just like the lazy loading of the picture, if the customer does not see those pictures at all, we will load it all when opening the page, which will greatly increase the request time, lowered The degree of experience of the user. Lazy loading is useful in a lot of websites, such as Taobao, Jingdong, etc. shopping sites, the above picture links, etc., if you pull the roller quickly, you may see the picture loaded Condition.

Single page application is also the same, the user may not have to hop to other pages, but only at the main page, then we don’t have to load all other pages. come over. If the user picks it to load. This will greatly improve the request time and improve the degree of experience of the user.

The WebPack provides request.Ensure () to implement on-demand load. The previous introduction of the route is introduced in a manner such as IMPORT, and the introduction is changed to constly defined.

Do not perform the page on-demand] Import home from ‘../../common/home.vue’

Turning on-demand Way: const home = r => require.ensure ([], () => r (Require (‘../../ Common / Home.Vue’)))))))))

below More detailed explanation of content

Webpack Ensure believes that everyone has heard. Some people call it asynchronous loading, and some people say that the code is cut, what is the guy used? In fact, it is white, it is to export a .js file independently, then use this module, WebPack constructs the Script DOM element, initiates an asynchronous request from the browser. JS file.

Scene analysis:

With a button inside the home page, click on a map after clicking. If you open the map, you should use the JS of Baidu Map, so we have to pack the JS of Baidu map in the home page, a Baidu map’s JS file is very large, assuming to 1M, then it has caused our home package. JS is very large, the time when the user opens the home page is relatively long.

Is there any good solution?

Since packing into the same JS very big, then we can classify Baidu map JS, using the browser’s concurrent request JS file processing In this way, it will be much smaller than the load of a JS file. Well, this is also a good solution. Configuring a new entry for baidumap.js, so you can pack two JS files, you can insert HTML (if baidumap.js is referenced by multiple entry files, you can also set it as an entry file, And directly using CommonschunkPlugin, export to a public module) can be used to refer to my previous article WebPack module package

Is there any better solution?

Solve 2

Of course, there is still! We impede that Baidu map is that the user clicks only, that is, this function is optional. So, the solution is coming, can you click when you click, I am going to download the JS of Baidu map. Of course. How do you download the JS of Baidu map when you use a user? So, we can write a button listener (Function () {// Get Document Head Object VAR Head = Document.GtelementsBytagname (‘Head’) [0]; // Build
VAR script = document.createElement (‘script’); / / Set SRC attribute script.async = true; script.src = “” // Add to Head object in Head.Appendchild (Script);})
   The few lines of code above are not difficult to everyone. You can load Baidu map when you click, wait for Baidu map loading, perform our operations with Baidu map. OK, talking about the principle of WebPack.ensure, I have said a half. It is  put some JS module to a JS file independently, then you need to use, create a script object, add it to the Document.Head object, the browser will automatically initiate our request, go Ask this JS file, write a callback, after defining this JS file, what business logic is needed. 
OK, then we use WebPack’s API to help us complete such a thing. After clicking, we will write the Baidu map JS. When the Click to load JS, we write it yourself, WebPack can help us to get such a thing, no need to write (function () {require.ensure ([], function () {var baidumap = required (‘./ baidumap.js’) //baidumap.js put in our current directory})}

Get it! Of course, it is still analyzed. Require.ensure This function is a code-separated split line, which means that the callback inside is what we want to split, ie request (‘./ baidumap.js’), dividing baidumap.js, forming a WebPack package Separate JS file. Of course, EnSure can also write some synchronized Require, such as
VAR sync = Require (‘syncdemo.js’) // below ENSURE is also used in (Function () {require.ensure ([], function () {var baidumap = Require (‘./ baidumap.js’) //baidumap.js placed in our current directory VAR sync = required (‘ syncDemo.js ” ) // This will not be independent, because it has been loaded into the module cache})})

, ENSURE will put the unused Require resources It is independently divided into a JS file. What does the first parameter of Require.ensure? [], It is actually the other asynchronous loaded modules that current Require.ensures. Do you think? If A and B are asynchronously loaded, A, then before B download, is it to download A? So the first parameter of EnSure [] is its dependent asynchronous module, but it is important to note that WebPack will pack the asynchronous module in the parameter and the current needed asynchronous module to package into the same JS file. Here, there may be a repeated package problem. Assume that A and B are asynchronous. EnsuRe A relying on B, Ensure B, depending on A, then generateTwo files contain A and B modules. If you want to load a require.ensure ([‘a.js’], function can be
  said the above principle. Let's practice  

Entry.js relies on three JS.

ABTN-WORK.JS is the business logic that encapsulates the ABTN button.

BBTN-WORK.JS is the service that encapsulates the BBTN button. Logic 浅谈vue项目优化之页面的按需加载(vue+webpack)

Util.js is a toolbox

    that encapsulates Entry.js needs to be used, optimization scheme
  1. assumes ABTN-WORK.JS BBTN -work.js util.js is a very large file because abtn-work.js bbtn-work.js is not entry.js must have, that is, the action that may happen, then we use asynchronous load, when When you go to load again
  2. Util.js is the toolbox immediately relied immediately immediately. But it is very big, so the configuration is packaged into a public module, using the browser concurrent load, speed the download speed. OK, the idea is completed, began to achieve
  3. index.html


     Defined two buttom   Then look at ENTRY.JS    
Var util_sync = REQuire ('./ util-sync.js') Alert ( Document.GtelementByid ("abtn"). OnClick = function () {required () {var awork = required (' ./Worka-async.js') Alert (AWORK.DATA) // Immediately imports the synchronization module - actually uses module var util1 = requirements in synchronization ('./ util-sync.js')}} Document.GtelementByid ("bbtn"). OnClick = function () {Require.ensure ([], function () {var bwork = required ('./ Workb-async.js') Alert (}}
It can be seen that Worka-async.js, Workb-async.js are all clicked after Ensure. When is it loaded? Is the second function parameter, the callback function, which means that when the download JS is complete, after the logic
WebPack package,

Actually, 1.1 … 2.2 … is the JS file out of our EnSure

How do we see how the code is executed, click the HTML


It can be seen that there is no 1.1 … JS 2.2 … JS

JS 2.2 … JS 浅谈vue项目优化之页面的按需加载(vue+webpack) (123), click ABTN,

Discover the browser to download and load 1.1 … JS

浅谈vue项目优化之页面的按需加载(vue+webpack) Click BBTN

Discover the browser download and load 2.2 … JS

浅谈vue项目优化之页面的按需加载(vue+webpack) Vue project optimization, and the number of waiting time is reduced by reducing the number of requests to the server. For example, a page of a page includes a picture, a text, and other users have been loaded, and then the user has turned to another interface by clicking. Then return from another interface to the original interface. If there is no setting, then the original interface will be re-requested. The Keep-alive provided by Vue can be saved, reducing the number of requests, and improving the user’s experience.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment