页面打开太慢？那就一起来优化一下-CRMEB社区

页面打开太慢？那就一起来优化一下

管理

编辑

删除

一、import按需加载

按需加载路由组件通过import导入是性能优化的常用手段。此外,结合<component />组件动态渲染也可以进行优化。

典型的业务场景中,模块通常分为基础表和业务表两部分。基础信息建立完毕后,往往需要在不同业务页面间进行交叉引用。例如,在一个业务页面需要根据某个值到基础表页面搜索并选择信息。

在这类场景下,我们可以:

将基础表组件提取出来,单独引入。
业务页面通过<component :is="baseTable">动态渲染基础表组件。
传参控制基础表搜索和选择功能。
基础表返回选择结果给业务页面。

这样可以实现信息交叉复用,同时避免重复引入基础组件代码,优化了性能和结构。结合按需加载和动态渲染,可以很好解决这类常见业务需求。

<template>
  <div>
    <div class="count" @click="showDynamicComponent">按需加载页面</div> 
    <Modal title="动态数据" :visible="visible" @ok="()=>dynamicComponent=null">
      <component :is="dynamicComponent" ref="dynamicRef"/>
    </Modal>
  </div>
</template>

<script>
import { Modal } from 'iview'
export default {
  components: {
    Modal
  },
  data() {
    return {
      dynamicComponent: null,
      visible: false
    };
  },
  methods: {
    showDynamicComponent() {
      this.visible = true
      import('@/views/base/test.vue').then(res=>{
        this.dynamicComponent = res.module
      })
    },
  },
};
</script>

最后通过this.$refs.dynamicRef这个方式来拿到组件的信息和方法。

当然如果只引入一个组件的时候，可以不采用上面的方式进行。可以使用这种。

<template> 
    <dynamicComponent ref="dynamicComponentRef"/> 
</template>

<script>
// import dynamicComponent from '@/components/dynamicComponent.vue'; // 原来的引入
const dynamicComponent = () => import('@/components/dynamicComponent.vue')

export default {
    components: {
        dynamicComponent
    }
}
</script>

二、thread-loader打包

业务场景

充分利用cpu核心数，进行快速打包。

 // 开启多线程打包
    config.module
      .rule('js')
      .test(/\.js$/)
      .use('thread-loader')
      .loader('thread-loader')
      .options({
        // worker使用cpu核心数减1
        workers: require('os').cpus().length - 1,
        // 设置cacheDirectory
        cacheDirectory: '.cache/thread-loader'
      })
      .end()

三、图片转base64

将图片转成base64主要是为了减少HTTP请求数量,从而加快网页加载速度。除此以外,图片也可以上传到云端服务如阿里云、七牛云等,来优化图片体积大小。

当图片体积较小时,可以将其转成base64编码嵌入HTML中,这样可以完全避免额外的HTTP请求,明显加快加载。但是,base64编码后的图片体积会比原始图片大,所以只适合体积较小的图片。对于体积大的图片,最好还是单独请求,上传到云端优化也是一个不错的选择。

// 安装
npm install url-loader --save-dev
    
// 配置
module.exports = {
  module: {
    rules: [{
        test: /.(png|jpg|gif)$/i,
        use: [{
            loader: 'url-loader',
            options: {
              // 小于 10kb 的图片转化为 base64
              limit: 1024 * 10
            }
        }]
     }]
  }
};

相信大家还有其他的优化方案，欢迎大家在评论区中进行分享，或者发布文章，大家一起学习。