vue项目性能优化:去除无用的文件

前言:

        这里来分享一些vue项目性能优化的一些实用的方法,这里使用 useless-files-webpack-plugin 来查找无用文件。

实现步骤:

1、安装插件 

npm i useless-files-webpack-plugin -S

 2、vue.config.js中配置

const UselessFile = require('useless-files-webpack-plugin')
chainWebpack: config => {
    config.plugin('uselessFile')
        .use(
          new UselessFile({
            root: path.resolve(__dirname, './src'), // 项目目录
            out: './fileList.json', // 输出文件列表
            clean: false, // 是否删除文件,
            exclude: /node_modules/ // 排除文件列表
          })
        )

}

3、可以看到 unused-files.json  这个文件,每次编译都会没有用到的文件在中间,可以具体看一看,不需要的可以删掉

 

  • 6
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue 3项目性能优化可以从多个方面入手。其中一种方法是利用计算属性的缓存机制来避免重复计算。计算属性允许我们定义一个属性,该属性的值是基于其他响应式属性的计算结果。在Vue 3中,计算属性的缓存是通过将计算结果保存在缓存中,只有在依赖的属性发生变化时才重新计算。这样可以避免不必要的计算,提高性能。例如,在组件的`created`生命周期钩子中访问计算属性时,只有在第一次访问时才会对计算属性进行求值,后续的访问会直接返回缓存的值。 另一种性能优化方法是使用分批运行组件的算法。这种算法可以在组件渲染时将渲染任务分批进行,以避免一次性渲染过多的组件导致性能问题。在Vue 3中,可以通过使用`v-if`指令结合自定义方法来控制组件的渲染优先级。例如,可以根据`displayPriority`的值来决定是否渲染某个组件,同时利用`requestAnimationFrame`来分批执行渲染任务,以减少性能压力。 此外,合理使用`v-for`指令也是Vue 3项目性能优化的一种方法。在使用`v-for`指令时,应尽量避免在循环中使用复杂的计算或访问其他组件的数据。根据Vue官方的风格指南,应该将循环中的计算或访问其他组件的数据尽量提前处理,并将结果保存在响应式属性中。这样可以减少在模板中的计算量,提高渲染性能。 综上所述,Vue 3项目性能优化可以通过合理利用计算属性的缓存机制、使用分批运行组件的算法以及优化`v-for`指令的使用来实现。这些方法可以有效地提高项目的性能,提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值