vue优化方案

目前项目由我优化，把目前做了和准备做的做一个总结，持续更新吧。

 

1、路由懒加载

component: () => import('@/views/')

2、组件懒加载

 

3、图片懒加载

1.CDN引用vue-lazyload,<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

2.main.js：Vue.use(VueLazyload)

3.page中使用：

<img style="width: 100%;height: 100%;" v-lazy="imgmtbd">

data:imgmtbd:require('../assets/img/imgmtbd.png')

4、GZIP压缩

1.config-index.js——productionGzip：true

2.安装依赖——compression-webpack-plugin：npm install --save-dev compression-webpack-plugin@1.1.2

3.nginx 服务端修改http配置：

http:{

     gzip on;

     gzip_static on;

     gzip_buffers 4 16k;

     gzip_comp_level 5;

     gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg

       image/gif image/png;

}

4.打包会看见文件后缀为gz

5、V-IF和V-SHOW的区别使用

 

7、禁用行内样式

 

8、webpack压缩图片

 

9、提取公共代码（方法和公用组件）

 

10、npm包改成cdn引用

 

11、computed和watch区分

 

12、v-for每个都有key，避免同时使用v-if

使用filter，v-for="el in modularName.filter(obj=>{})"

若只使用一次可用computed

13、第三方插件按需引入

 

14、若为列表，item设置唯一key值