Shulou(Shulou.com)06/01 Report--

This article mainly explains the "vue how to solve the problem of slow loading of the home page", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue how to solve the problem of slow loading of the home page" bar!

1. Route lazy loading {path:'/ chinaWine', name: 'chinaWine', component: resolve = > require (['. / views/chinaWine'], resolve)}

This method packages the original app.js file into multiple js files separately, which reduces the size of a single file, but not the size of the entire js folder.

In this way, you can load on demand, loading only the js file for a single page.

2. Remove the map file from the packaged file

The packaged app.js is too large, and there are also some generated map files. Remove the redundant map files first

Find the index.js file under the config folder and change the productionSourceMap in the build to false.

3. CDN introduces the third-party library

In the development of the project, we will use a lot of third-party libraries. If we can introduce them on demand, we can only introduce the components we need to reduce the space.

But there will be some can not be introduced on demand, we can use CDN external load, introduce components from CDN in index.html, remove other pages of the component import, modify webpack.base.config.js, add this component in externals, this is to avoid compiling the component can not find an error.

4. Gzip packing

Gizp compression is a http request optimization method that increases loading speed by reducing file size.

Html, js, css files and even json data can be compressed with it, reducing the volume by more than 60%.

1. Npm I-D compression-webpack-plugin2, configure const CompressionPlugin = require ('compression-webpack-plugin') configureWebpack: config = > {if (process.env.NODE_ENV =' production') {return {plugins: [new CompressionPlugin ({test: /\ .js $|\ .html $|\ .css /, threshold: 10240) in vue.config.js DeleteOriginalAssets: false})} 3. Configure http {gzip on in NGINX Gzip_min_length 1k; gzip_buffers 48k; gzip_http_version 1.0; gzip_comp_level 8; gzip_proxied any; gzip_types application/javascript text/css image/gif; gzip_vary on; gzip_disable "MSIE [1-6]\."; # configuration omitted.}

Nginx-s reload: reloading takes effect after configuration modification

5. The ultimate trick, pre-rendering

In fact, the above optimization is done, the optimization to less than 5 seconds is no problem, but if we have more than 100 front-end pages, larger projects, it may still be a little slow.

We have done so much above, all based on the rendering after the execution of js. If you want to be faster, there are two options, one is ssr, which is server rendering, and the other is pre-rendering.

Pre-rendering is before the js load, generated a static page of the home page for loading, will not keep you waiting, the performance of the static page is needless to say, whoosh.

Pre-rendering relies on the prerender-spa-plugin plug-in, which is also very easy to use, but there are so many holes that an error will be reported if one place is not respected:

1. Cnpm install prerender-spa-plugin-save-dev

It is recommended to use Taobao image cnpm, because npm installation often fails, blood and tears lessons, tossing around all morning

2. Vue.config.jsconst path = require ('path'); const PrerenderSPAPlugin = require (' prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; is under the plugins, find the plugins object, and add it directly to the line / / pre-render configuration new PrerenderSPAPlugin ({/ / requirements-pre-render the path of the WebPack- output application. StaticDir: path.join (_ _ dirname, 'dist'), / / required, the route to render. Routes: ['/ login'], / / must, the actual renderer to be used cannot precompile renderer: new Renderer ({inject: {foo: 'bar'}, headless: false, / / display the browser window when rendering. It is very useful for debugging. / / wait for rendering until the specified element is detected. / / for example, use `document.dispatchEvent (new Event ('custom-render-trigger')) `renderAfterDocumentEvent:' render-event'})}) 3, router.js in the project entry

You need to set the router mode of vue to history mode

4 、 main.js

Add an event to the mounted that creates the vue instance, corresponding to the renderAfterDocumentEvent in the PrerenderSPAPlugin instance.

Mounted () {document.dispatchEvent (new Event ('render-event'))}

This is the basic configuration of pre-rendering, npm run build, if the dist folder has more folders you want to pre-render, then congratulations, it's a success! If the project is proxied with nginx, nginx also needs to do some configuration, specifically:

Location = / {try_files / home/index.html / index.html;} location / {try_files $uri $uri/ / index.html;}

Configure it according to the route you want to render

Thank you for your reading, the above is the content of "vue how to solve the problem of slow loading of the home page", after the study of this article, I believe you have a deeper understanding of how to solve the problem of slow loading of the home page of vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.