vue项目性能优化策略

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

createApp(App)
  .component("Modal", Modal)
  .mount("#app");
  1. 压缩代码
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. 路由懒加载
    方式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')
        }
  ]
}) 
  1. 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,减轻了带宽压力
  1. 页面优化
    v-once只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
    v-cloak当加载缓慢时可能出现显示vue源码的情况{{name}},可以使标签加载完成前保持隐藏状态
    keep-alive用于缓存组件,tabs组件中就可以适用,减少渲染
  2. 渲染优化
    vue刷新机制根据双向绑定的变量改变刷新,跟react不太一样,不需要触发视图更新的变量直接使用let/const 创建即可,
    高频刷新功能可根据情况控制刷新频率,例如数据累计后触发data的数据变更

你可能感兴趣的:(vue,vue,性能优化)