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 [email protected]
//部分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']
  ]
};