vue项目优化

1.v-if  v-show

2.在页面destroy或beforeRouterLeave时清除定时器跟事件的监听

3.图标采用雪碧图

4.路由采用懒加载

5.组件采用按需加载

6.v-for遍历时一定为item添加key值

7.打包的vendor.js过大，采用cdn加载不打包进入vendor.js,步骤：1.在index界面引入cdn。2.在webpack.config.base.js文件中添加externals2.在main.js文件删除对应的引用，use采用在externals中的变量。

8.可以采用Gzip进行文件压缩。步骤：1.npm install --save-dev compression-webpack-plugin@1.1.11；2.在config中的index.js修改productionGzip属性为true。

9.happypack 

npm install happypack -D

webpack.base.config.js

rules中添加对应的打包规则


 {
        test: /.vue$/,
        // loader: 'vue-loader',
        use: ['happypack/loader?id=vue'],
        // options: vueLoaderConfig
      },
      {
        test: /.js$/,
        // loader: 'babel-loader?cacheDirectory',
        use:['happypack/loader?id=babel'],
        exclude: /node_modules/,
        include: resolve('src')
      },


然后 在plugin添加对应的配置
plugins: [
    new HappyPack({
      // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
      id:'vue',
      loaders:[
        {
          loader:'vue-loader',
          options: vueLoaderConfig
        }
      ],
      threadPool: HappyPackThreadPool,
    }),
    
    new HappyPack({
      // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件
      id:'babel',
      // 如何处理.js文件，用法和Loader配置中一样
      loaders:['babel-loader?cacheDirectory'],
      threadPool: HappyPackThreadPool,
    }),
    
  ],

rule中的id  与plugin 中的id需要一致