vue project development optimization

Demand assembly 1 is introduced ui

For example elementUI, not to introduce all the components directly in the global main.js, according elementui of documentation, the introduction of on-demand

Project components

2 is introduced asynchronous routing component

use

{

　　path:'/index',

　　name:'index',

       component:resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk')

}

vue comes asynchronously // routing lazy loading, after packing, comments webpackChunkName as will be packed into the same js file

component: resolve => require(['@/components/index'], resolve)

es proposals import ()

component: () => import(/* webpackChunkName: "indexChunk" */ '@/components/index.vue'’

webpack provided require.ensure ()

resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk')

Routing lazy loading, dynamic routing could not pass value

This code will be sorted into components called indexChunk chunk of automatically parsed to load the chunk when the site loads, although packaged separately in a total volume becomes larger (same chunk will be packaged with a js file), but reduces the resources request, so as to enhance the speed.

 resolve=>require(["@/components/index"],resolve)

3 source code optimization

Setting item a unique key value, reducing watch data, broken down vue components, demand loading images, pictures and more when you can use lazy loading, SSR server rendering;

4 css   sourceMap

sourceMap: process.env.NODE_ENV === "production" ? false : true,

// whether to build the style map, false will increase build speed