Vue is a singleton page, all pages are dynamically rendered by JS, so the size of JS will be bigger and bigger, so that the rendering performance of image pages

1. Asynchronous components

The official launch of asynchronous component routing, is a solution to the problem of large size after JS packaging, can be very good vUE components according to the group, so as to type different JS files, to solve the problem of single JS packaging.Copy the code

The following is the final file for an asynchronous component package

The following number is the hash value, In order that JS will not buffer the extra configuration code of app for vue and vue-router third-party libraries vendor for the plugin's own code mainfest for the third-party library Runtime code The array part is different groups of asynchronous packaged files (several groups have several JS files)Copy the code

Official asynchronous component portal

Note: do not put js component granularity is very small, JS files will affect efficiency, browser loading JS threads are generally 4-5

2. Webpack the configuration

Third-party library files can use third-party CDNS, reducing vendor size. Webpack packaging ignores third-party library configuration (webpack.base.conf.js)Copy the code
externals: {
  'vue': 'Vue'.'vue-router': 'VueRouter'.'vuex':'Vuex'.'axios': 'axios'.'element-ui':'ELEMENT',}Copy the code
If you don't want to set up a CDN in an Intranet environment, just download the corresponding library file and use it locally, importing HTML as usualCopy the code

Local library file

	<body>
		<div id="app"><! --vue-ssr-outlet--></div>
		<script src="/ static/CDN/vue / 2.5.2 vue. Min. Js." " charset="utf-8"></script>
		<script src="/ static/CDN/vuex/against 2.4.1 vuex. Min. Js." " charset="utf-8"></script>
		<script src="/ static/CDN/vue - the router / 3.0.1 vue - router. Min. Js." " charset="utf-8"></script>
		<script src="/ static/CDN/axios 1.0.0 / axios. Min. Js." " charset="utf-8"></script>
		<script src="/ static/CDN/element - the UI/at 2.0.5 / index. Js." " charset="utf-8"></script>
	</body>
Copy the code

Bootcdn Official portal

Experiments show that the method can reduce the volume file by 60% and greatly improve the rendering speed

3.SSR

SSR is to change the front-end rendering into background direct rendering, rendering good pages directly presented to customers, this method can be used for baidu promotion and SEO optimization of the website has great significance.

Common background rendering frameworks are NuxtJS

4. Break up projects

Different modules in a project split out, can be independent into vUE project, using iframe label to jump, validation you can make a common JS validation library and server side interaction. (There is a system like background microservices.)

This method is still in the experimental stage, just a personal idea

Above are the problems encountered in the packaging optimization after the launch of vUE project recently.