vue项目性能优化策略

吃柠檬的猫

已于 2023-01-13 10:35:01 修改

阅读量659

点赞数 1

分类专栏： vue 文章标签： vue 性能优化

于 2019-10-07 16:44:11 首次发布

本文链接：https://blog.csdn.net/weixin_43222302/article/details/102312643

版权

vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

按需引入
导入‘element’类似组件时，不要整个导入使用，只需要导入使用的组件
论组件的复用性：全局组件与局部组件
在项目中无论vue，react都会存在组件复用性问题，这里主要说在vue中的说明
全局组件：在main.js进行全局注册组件，达到其他组件可以无需再次注册可直接使用
优点：无需重复注册
缺点：每次刷新都会加载组件，增加加载消耗
适应场景：消息提示，使用频率高
局部组件：在需要使用的地方注册并使用
优点：只会在调用的地方刷新才会加载，减少加载消耗
缺点：每次使用都需要重新注册
适应场景：使用频率一般较少

import Modal from "@/components/modal.vue";

createApp(App)
  .component("Modal", Modal)
  .mount("#app");

压缩代码

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true,
    pure_funcs: ['console.log']
  },
  sourceMap: false
})
vue中在vue.config中
productionSourceMap: false,
//其中sourceMap: false是禁用除错功能。
//如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。
//这个功能虽好，但会大大增加整体资源包的体积，所以将其禁用。

路由懒加载
方式1

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
//     {
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
        {
          path: '/',
          name: 'HelloWorld',
          component: () => import('@/components/HelloWorld.vue')
        }
  ]
})

CND加速

在index.html中导入CND资源

 <body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 </body>

在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入，并去掉原来main.js中的import导入

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex'
  }

去掉import，如：

// import Vue from 'vue'
// import vue-router from 'vue-router'
//vue.js、Router.js等文件会分别由一个线程进行加载。且因为使用了CDN，减轻了带宽压力

页面优化
v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
v-cloak当加载缓慢时可能出现显示vue源码的情况{{name}}，可以使标签加载完成前保持隐藏状态
keep-alive用于缓存组件，tabs组件中就可以适用，减少渲染
渲染优化
vue刷新机制根据双向绑定的变量改变刷新，跟react不太一样，不需要触发视图更新的变量直接使用let/const 创建即可，
高频刷新功能可根据情况控制刷新频率,例如数据累计后触发data的数据变更

吃柠檬的猫

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue项目性能优化策略

v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能v-cloak当加载缓慢时可能出现显示vue源码的情况{{name}}，可以使标签加载完成前保持隐藏状态keep-alive用于缓存组件，tabs组件中就可以适用，减少渲染
复制链接

扫一扫