vue项目开发优化

1 按需引入ui组件

比如elementUI，不要直接在main.js中全局引入所有的组件，可以根据elementui的说明文件，按需引入

项目中的组件

2 异步引入路由组件

使用

{

　　path:'/index',

　　name:'index',

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

}

vue自带的异步方式            //路由懒加载，打包之后，注释中webpackChunkName一样的会被打包到同一个js文件中

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

es提案的import()

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

webpack提供的require.ensure()

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

路由懒加载时，路由不能动态传值

这段代码将组件分类到名为indexChunk的chunk中，在网站加载时会自动解析需要加载那个chunk，虽然分别打包在总体积会变大（同chunk将打包同一个js文件），但是减少了资源请求，从而提升了速度。

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

3 源码优化

为item设置唯一的key值，减少watch数据，细分vue组件，按需加载图片，图片多的时候可以使用懒加载，SSR服务端渲染；

4 css   sourceMap

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

// 是否构建样式地图，false 将提高构建速度