美文网首页
vue项目优化方案

vue项目优化方案

作者: 暖年的咆哮 | 来源:发表于2021-02-23 11:28 被阅读0次

使用严格模式,指定代码书写规范

1.尽量减少定时器的使用,如果一定要使用,那么在使用完成之后记得清楚定时器
2.v-for和v-if需要同时存在的时候,先对需要v-for的数组进行过滤,这样就可以避免渲染v-if===false的数据

首屏加载优化

路由懒加载,三种方式
  1)vue异步组件技术
      { 
        path: '/home', 
        name: 'home', 
        component: resolve => require(['@/components/home'],resolve) 
      },
  2)使用import
      const Home = () => import('@/components/home')
      { 
        path: '/home',
        name:'home', 
        component: Home 
      }
  3)webpack提供的require.ensure() 
      {
        path: '/home', 
        name: 'home', 
        component: r => require.ensure([], () => r(require('@/components/home')), 'demo') 
      }

开启gzip压缩代码,此方案同样是解决首屏加载过慢的方案之一

vue-cli3
//安装插件
cnpm i compression-webpack-plugin@1.1.11
//部分webpack插件会有版本不兼容问题,会报一些奇怪的错误,所以顺带把自己安装的插件版本加上
//然后在vue.config.js中开启即可:
build: {
    productionGzip: true, // false不开启gizp,true开启
}
//后台nginx配置
server {
        gzip on;
        gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
        gzip_static on;
        charset utf-8; 
        //...其他配置
}

UI库的按需加载

//安装插件
cnpm i babel-plugin-import -D
//在 .babelrc文件中写入以下内容
// 在.babelrc 中添加配置,粘贴的vant官网,其他如element,antd都有对应的按需引入的文档,可具体至文档查看
// 注意:webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

相关文章

  • vue项目优化方案

    1、v-if 和 v-show 区分使用场景v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景;v-s...

  • vue项目优化方案

    使用严格模式,指定代码书写规范 首屏加载优化 开启gzip压缩代码,此方案同样是解决首屏加载过慢的方案之一 UI库...

  • Vue项目的SEO预渲染优化方案

    有关Vue项目或是单应用的项目优化方案很多,我只简单说两种,举个小栗子: # 1. vue-meta-info插件...

  • Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具...

  • Vue项目性能优化方案

    经过对项目结构 / 开发方式 / 技术架构的研究,再次提出部分可以优化的点。 刚加入新公司之后,在学习来新公司的开...

  • vue项目性能优化方案

    背景:项目采用vue cli3搭建,集成前端组件以及地图效果,导致项目打包后资源包文件特别大,打包速度慢,首屏渲染...

  • Vue 项目性能优化方案

    前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们...

  • vue-cli3 配置骨架屏方案

    vue-cli3配置骨架屏方案 前言 最近在学vue,准备使用vue写一个移动端项目。考虑到首页白屏优化,需要实现...

  • vue项目优化方案(性能,包体积,页面加载速度等)

    vue项目优化方案(性能,包体积,页面加载速度等) 项目优化,是一个老生常谈的问题。这里简单总结一下相关方法: 1...

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

网友评论

      本文标题:vue项目优化方案

      本文链接:https://www.haomeiwen.com/subject/ellrfltx.html