vue项目优化方案

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

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 cli3搭建,集成前端组件以及地图效果,导致项目打包后资源包文件特别大,打包速度慢,首屏渲染...
    坏丶毛病阅读 2,466评论 2 15
  • 1、v-if 和 v-show 区分使用场景v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景;v-s...
    Eirmood阅读 2,154评论 0 20
  • H5性能优化方案 H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原...
    自然心情阅读 8,066评论 0 14
  • H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就...
    7ece657ee3b6阅读 1,600评论 0 2
  • H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就...
    望月成三人阅读 992评论 1 10