1, route a lot of complex pages, lazy loading route
- Use const Foo = () => import ( './ Foo.vue') instead of the import './Foo.vue';
2, there is provided an external library loaded on demand features that can be loaded on demand in accordance with the practice of official documents
3, open the Gzip compression
4, page rendering optimization (reduction rearrangement), component optimization, infrastructure optimization (js, css), image optimization
-vue official website of the norms to be followed;
- by routing module division. Routing and sub-division in accordance with the routing service module according to visual function or interaction issued by or on dividing module assembly;
- a common extraction method, a common pattern, a common state;
- Use the font icon instead of a solid color or gradient color icons, such as the use icomoon;
- Picture lazy loading - to reload viewable area;
-v-if, select the v-show. Rights related to the use of v-if, frequent switching using the v-show, do not frequently switch between v-if;
-style using <style scoped> avoid conflicts, the global style abstraction as possible, to improve the reuse rate, css reduce the file size, to save bandwidth;
- Depending on the complexity of the page, delete window.setTimeout methods section of the page life cycle created;
5, network optimization request
- usually choose a method http request for secondary packaging, in order to increase the uniform interceptor, or repeatedly submit unitary prevent such logic;
- the rational use vuex, page components such as a plurality of frequent handover edit page store data from multiple Store, reducing the http request;
6, the rational use of cache
- a reasonable set of HTTP cache. 1 a flowchart of processing a request from a browser can be seen in FIG, provided the appropriate buffer can be greatly reduced HTTP request, saving bandwidth.
As little change resources (html, css, js, pictures, etc.) may be set in the browser cache by HTTP Header cache-control and Expires, changes are not frequent and may become a resource request using the Last-Modifed do verification;
7, packaging optimization
- WebPACK provides externalscan be used with external resources CDN relaxed significantly reduce the volume of packaging for echarts, jQuery, lodashthis exposes a library global variable;
- a production environment using webpack-parallel-uglify-plugin, compressed;