乐趣区

关于vue.js:vue-性能优化

jiezi

1、v-for 和 v -if 不要在同一级应用,v-for 比 v -if 的优先级高 会先执行循环，同时应用了会每次循环都执行一次 v -if，
2、vue 中应用的 js 资源 尽量的应用 cdn 形式在加载，以此缩小打包之后的体积
例：

externals: {jquery: 'jQuery'}
//[webpack 内部扩大性能](https://www.webpackjs.com/configuration/externals/)

3、路由器的按需加载

//ES6 形式加载
{
    path:'/denglu', // 登录
    name:'denglu',
    component:()=>import('../components/denglu'),
    meta:{ // 菜单
      title:'登录'
    }
}
//webpack 引入形式
{
    path:'/denglu', // 登录
    name:'denglu',
    component:resolve=>(require(['../components/denglu'],resolve)),
    meta:{ // 菜单
      title:'登录'
    }
}

4、组件的按需引入，例如 element ui ant Design 等框架提供的都有按需引入，须要哪些性能引入哪些组件。
例：element UI

import Vue from 'vue';
import {Button, Select} from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

5、图标和图片的合理性优化

1. 小图标应用 SVG
2. 通过 base64 和 webp  的形式加载小型图片
3. 大图片尽量应用 CND 的形式加载
4. 图片的懒加载，大部分 ui 框架都带有图片懒加载的，没有能够应用 v -lazy

6、勾销 console 打印

module.exports = {
    configureWebpack: config => {
        // 勾销 console 打印    
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
}

7、gzip 压缩

const productionGzipExtensions = ['js', 'css'];
module.exports = {
    productionSourceMap: false, // 不显示 map 源码
    //gzip 压缩
    configureWebpack: config => {if (process.env.NODE_ENV === 'production') {config.plugins.push(new TerserPlugin())
        config.plugins.push(new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        }))
      }
      // 勾销 console 打印    
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    },
}

服务器 nginx 也须要部署 gzip 代码如下

server{
     gzip  on;
    gzip_static on;
    gzip_buffers 4 16k;
    gzip_comp_level 8;
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
    gzip_vary on;
}

8、生成剖析包 查看打包之后的占比，进行剖析，（以上的内容曾经进行优化和压缩）查看是否屡次引入
vue.config.js

    chainWebpack:config =>{
        // 删除预加载 真正的按需加载
        config.plugins.delete('prefetch');
        /* 增加剖析工具 */
        if (process.env.NODE_ENV === 'production') {if (process.env.npm_config_report) {
              config
                  .plugin('webpack-bundle-analyzer')
                  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                  .end();
              config.plugins.delete('prefetch')
          }
        }
    }

或者
package.json 在 build 中增加 –report

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },

执行命令后会在 dist 中生成一个 report.html 文件 关上文件就是剖析图表


1、keep-alive 页面缓存 keep-alive 会缓存以后页面的数据，防止反复调用接口 反复渲染占用性能

<keep-alive :include="tagsList">
   <router-view :key="$route.fullPath"></router-view>
</keep-alive>
退出移动版