vue项目优化

时间：2023-02-23 17:06:39

技术选择 ：

选一个好的技术当然会快许多  我选择的是vue3 它的tree  shaking  确实可以让打包后的体积小很多

CDN加速：

index页面中加入请求连接

  <!-- vue 引入cdn -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.min.js"></script>
  <!-- 引入 cdn axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
  <!-- vue-router 引入cdn-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.min.js"></script>

  <!-- 引入element ui  -->
  <!-- Import component library -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.28/index.full.min.js"></script>

  <!-- dayjs -->
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>

  <!-- 百度地图 -->
  <!-- <script src="./index.js"></script> -->

  <!-- 这个用官网给的有好多警告 更具百度的把 https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxx 换为这个就没有那么多 报错了 -->
  <script
    type="text/javascript"
    src="https://api.map.baidu.com/getscript?v=2.0&ak=4GAt7jxWL2uN0RVFCBbuyuQWi9e2Er8k"
  ></script>

　在vue config js 配置

const objExternals = {
  // CDN 的 资源（和vue相关的） 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
  'vue': 'Vue',
  // 属性名称 Vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，
  // 不去 node_modules 中找，而是去找 全局变量 Vue
  'vue-router': 'VueRouter',
  'element-plus': 'ElementPlus',
  'axios': 'axios',
  'dayjs': 'dayjs'
}
module.exports = defineConfig({
  configureWebpack: {
    //判断在生产环境就使用cdn, 看个人项目情况
    // 这句话是否判断处于生产环境 如果是生产环境的就使用cdn加速
    // externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {} : objExternals
    externals: objExternals
  },
}）

配置完就能用了 就在main .ts 中像往常一样引入就好了

注意：cdn加速网站一定要找靠谱的不然它关了你项目就 挂了 推荐https://www.bootcdn.cn/

如果你脚手架还报错的话推荐在开发环境下 安装一下 例如 npm  install  axios -D

路由懒加载和分包

配置路由的时候配置为动态路由 把不同的路由分割成不同的代码块 使入口文件变小 提高访问效率

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    meta: { title: '登录页' },
    name: 'login',
    component: () =>
      import(/* webpackChunkName: "login" */ '@/views/Login.vue'),
  },

代码层面：

采用HTTP缓存设置响应头 设置Cache-Control  Last-Modified Etag 等

前端合理使用localStorage   

合理的设置v-if  和 v-show (常切换的使用v-show 反之)

减少服务器请求 有的数据在多次使用的 时候 就只请求一次 然后在多处使用 当然在不同的页面也要判断数据是否存在不存在就做完第一次的请求

数据懒加载 在没有用户浏览的页面 不加载数当用户滚动到了在加载就是只加载可视区域

用的少的插件不去下载 自己写 比如vuex 在一些小的项目中用的少的就完全没有必要去下载vuex 自己写一个 用好多方法 （我前面文章有提到）

减少dom 结构的嵌套

降低css 的选择器

减少dom 的重绘重排

对于windows 监听事件要及时销毁 和定时器能少开就少开极大的消耗性能  

如果考虑优化原生的html 的话要考虑css 放在前面 js 放在最后 （ 因为js 会阻止dom 的形成    比如你写了一个行内的js 代码 js 代码就会打断dom 树的继续生成 等着css  js生成完才执行）

使用异步组件defineAsyncComponent

当一些组件太大的时候 用异步组件 当你需要加载的时候 先加载出来其他组件  先让用户看见整个框架  在慢慢回来 当然你也可以用个骨架框 

const DetailsBanner = defineAsyncComponent(
  () => import('@/components/details/DetailsBanner.vue')
)

不生成map文件 

module.exports = {
  productionSourceMap: false, // 打包时不会生成 .map 文件，加快打包速度
}

使用gzip压缩代码 减少代码体积

npm install --save-dev compression-webpack-plugin@1.1.2

配置vue.config.js

   c
const isProdOrTest = process.env.NODE_ENV !== 'development'
module.exports = defineConfig({
 chainWebpack (config) {
    // 打包压缩
    config.plugins.delete('prefetch');//默认开启prefetch(预先加载模块)，
     提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能模块
    if (isProdOrTest) {
      // 对超过10kb的文件gzip压缩
      config.plugin('compressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|html)$/,// 匹配文件名
          threshold: 10240,
        })
      );
    }
  }
})

配置完打包测试一下看一下是否有.gz结尾的 有就成功了

 然后在服务器上下载模块  引入我是express 服务器 直接 npm  install  compression   

app.use(compression())

　　

图片加速：

页面中图片才是拖垮响应的重点 

在项目中下载 压缩图片的

npm install "image-webpack-loader" -D
  //  图片压缩
  chainWebpack (config) {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end()
}

使用压缩后的图片 上网找找有好多压缩图片的网站 压缩完在上传 服务器 推荐（https://tinypng.com/）

使用webp 格式的图片能很好的减小图片大小

使用雪碧图  用一张大图 省去多个小图片的请求  但是 会加大图片体积 有可能会拖慢请求 

使用iconfont  轻量好修改

把小点的图片进行压缩成 base64格式 但是图片太大了就不适合了因为压缩完的代码体积会变大

module.exports = {
...
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10240,
          name: utils.assetsPath('img/[name].[hash:7].[ext]'),
        }
      },
    ],
  },
}

使用css代替图片或者使用cdn 图片（但是对方网站挂了你的图片也挂了）

使用渐进图片 ;渐进式图片可以让用户产生图片加载变快的印象。用户不再盯着一片空白区域等待图片加载，而能看到图像变得越来越清晰，这样对用户体验也是友好的。骨架屏技术也是类似的原理。

npm installv-progressive-image

然后在mian.ts 中引入

// 这个是图片预加载 需要配置shims-vue.d.ts 
import vProgressiveImage from 'v-progressive-image';
createApp(App).use(router).use(vProgressiveImage).mount('#app')

然后就可以使用了

  <div v-preview="先显示的图片 一般都是小点图片" v-origin="要加载的图片src">

DNS优化

NS解析需要耗费 20-120ms，所以为了优化DNS

使用一个dns-prefetch

<link rel="dns-prefetch" href="https://baidu.com/">

　　

相关文章