vue代码优化问题

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部