vue代码优化问题

vue

1、路由懒加载

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

2、代码模块化

咱们可以把很多常用的地方封装成单独的组件,在需要用到的地方引用,而不是写过多重复的代码,每一个组件都要明确含义,复用性越高越好,可配置型越强越好,包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

3、for循环设置key值

在用v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值,为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff。

4、更加理解Vue的生命周期

vue组件销毁时,会自动解绑他的全部指令及时间监听器,但是仅限于时间本身的事件,定时器的销毁需要手动去除

不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null

5、可以使用keep-alive

keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。

6、节流防抖

7、图片的懒加载

使用vue-lazyload库

8、无状态的组件标记为函数式组件

可以提高性能,减少内存的消耗

<template functional>

</template>

9、合理利用计算属性的依赖缓存

二、打包层面

查看打包文件结构 和 各种文件的比例

这里推荐使用 webpack-bundle-analyzer,通过她可以查看打包文件的模块组成,找出不和时宜的存在,然后优化她。

首先 npm install --save-dev webpack-bundle-analyzer
然后运行 npm run build --report 命令会自动打包,并弹出网页(包含打包文件图)

这里是因为 webpack-bundle-analyzer 的配置 vue-cli(2.0)已经帮你配置好了,传入一个report参数 就可以启动了

1使用cdn的方式外部加载一些资源

比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件

externals: {

'vue': 'Vue',

'vue-router': 'VueRouter',

'vuex': 'Vuex',

'axios': 'axios',

}

2、不让css打包在一起(让css文件和单文件打包在一起)

默认css会打包到一个css 里面,一个就太大了
所以 在 webpack.prod.conf.js 里面把所有块打包在一起设置为false

allChunks: false,

3、不生成.map文件

webpack默认会生成map文件,map文件是用来调试代码的,把productionSourceMap设置为false。此外,这里还要注意sourcemap的配置分 开发(dev)和线上(build)两个地方配置,开发我们就不管了,就用默认的,线上我们是不需要这个代码的。

4、减少图片使用

因为对于网页来说,图片会占用很大一部分体积,所以,优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果,或者使用雪碧图来减少图片的体积。

5、按需引入

咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分,无端增加项目体积。比如在使用element-ui库的时候,包括loadsh等工具库可以只引入需要用到的组件。

以上是 vue代码优化问题 的全部内容, 来源链接: utcz.com/z/380894.html

回到顶部