vue之性能优化

一、源码优化

  1. 模块化
    封装成组件,减少代码冗余,每个组件有明确含义,复用性越高越好,可配置性越高越好,包括css。

  2. for循环设置key
    循环时添加key,便于呢行代码更好找到该条数据,新旧值相比时可以更快的定位到diff。

  3. 路由懒加载
    首屏渲染时能够加快渲染速度vue之性能优化_第1张图片

  4. 避免内存泄漏
    使用过后的全局变量在组件销毁后重新置为null。

  5. keep-alive
    对组件进行缓存,节省性能。

  6. v-if 和 v-show
    看场景,自行选择

  7. 减少watch的数据
    数据变化量大的时候会有卡顿现象,可以换换computed

二、打包优化

  1. 修改vue-config-index.js配置项
    productionSourceMap设置为false(否则会生成map文件,像未加密的代码一样,准确的输出是哪一行哪一列有错);
    productionGzip设置为true,开启gzip压缩,使打包过后体积变小。

  2. 使用cdn加载外部资源;
    比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。
    index.html
    vue之性能优化_第2张图片

  3. 减少图片使用,使用雪碧图(多个icon在一块)或css样式;

  4. 按需引入
    按需引入

  5. console语句过滤
    webpack.config.js 的 plugins 里面加上

new webpack.optimize.UglifyJsPlugin({
	compress:{
		warnings: false,
		drop_debugger: true,
		drop_console: true
	}
})

	new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true //就是这个玩意儿,看见没,就它,省了多大事儿
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

你可能感兴趣的:(vue,前端,vue.js)