vue 性能优化

vue 性能优化

目前想到的有五步：

1. 路由使用懒加载模式加载组件
2. 图片懒加载
3. 如果使用了组件库(vant/element-ui/iview)，按需加载，不要全局引用
4. 第三方库使用CDN方式引入
5. webpack打包优化
   ○ 打包去除Map文件
   ○ 开启gZip压缩（ compression-webpack-plugin ）
   ○ 压缩JS文件( uglifyjs-webpack-plugin )

1 路由懒加载

// 懒加载模式
const routes = [
  {path: '/home', component: resolve=>(require(['@/pages/home'], resolve)), meta: {title: '首页'}}
];

// 非懒加载模式
const routes = [
  {path: '/home', component: () => import('../pages/home'), meta: {title: '首页'}}
];

2 图片懒加载

使用vue-lazyload插件，安装并注册并使用。

2.1 安装

npm install vue-lazyload --save

2.2 注册

// main.js
import VueLazyload from 'vue-lazyload'

// 注册使用
Vue.use(VueLazyload, {
	error: '/static/img/error.png',
  loading: '/static/img/loader.gif',
});

2.3 使用

<!-- 页面引用 -->
<img v-lazy="imgSrc" />

3 组件库按需加载

看vant、element-ui、iview官网示例

// 以vant的图标为例
<template>
  <van-icon  name="chat-o"></van-icon>
</template>  

<script>
  import { Icon } from 'vant';
	export default {
  	components: {
    	'van-icon': Icon
    }
  }
</script>

4 CDN引入第三方库

bootstrap CDN：https://www.bootcdn.cn
Staticfile CDN：https://www.staticfile.org
jsDelivr CDN：https://www.jsdelivr.com
75 CDN：https://cdn.baomitu.com
UNPKG：https://unpkg.com
cdnjs：https://cdnjs.com

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

5 webpack打包优化

参考webpack官网：
https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin/

5.1 打包去除map文件
在/vue.config.js文件中设置productionSourceMap=false；编译时将不再生成.map文件

module.exports = {
    productionSourceMap: false
};

5.2 开启gZip压缩
compression-webpack-plugin 实现gZip压缩，可以很大程度减少包的大小。经过gzip压缩，页面可以变为原来的30%甚至更小。提升用户浏览页面速度。

• 第一步：安装

// 需要安装1.1.12版本，别的版本可能会报错；
npm install compression-webpack-plugin@1.1.12 -D

• 第二步：配置vue.config.js

// vue.config.js

const CompressionPlugin = require('compression-webpack-plugin');

const pluginsArray = [];
if （process.env.VUE_APP_ENV == 'production') {
  pluginsArray.push(
      new CompressionPlugin({
      minRatio: 0.8, // 压缩率
      test： /\.js|\.css/, //处理所有匹配资源
      deleteOriginalAssets: false, // 是否删除原资源
    })
  );
}

module.exports = {
	plugins: [...pluginsArray]
};

5.3 压缩JS文件

• 第一步：安装

npm install uglifyjs-webpack-plugin -D

• 第二步：配置vue.config.js

// vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const pluginsArray = [];
if （process.env.VUE_APP_ENV == 'production') {
  pluginsArray.push(
    new UglifyJsPlugin({
      uglifyOptions: {
        // 生产环境自动删除console
        compress: {
          drop_degugger: true,
          drop_console: true,
          pure_funcs: ['console.log']
        }
      },
      sourceMap: false, // 是否使用sourceMap将错误消息位置映射到模块(这会减慢编译速度)
      parallel: true, // 是否使用多进程并行运行来提高构建速度
    })
  );
}

module.exports = {
	plugins: [...pluginsArray]
};

5.4 压缩IMG文件

• 第一步：安装

npm install image-webpack-loader -D

• 第二步：配置vue.config.js

// vue.config.js

module.exports = {
	chainWebpack: config => {
  	if (process.env.VUE_APP_ENV == 'production') {
    	config.module
      	.rule('images')
      	.use('image-webpack-loader')
      	.loader('image-webpack-loader')
      	.options({bypassOnDebug: true})
      	.end()
    }
  }
};

额外配置

• 第一步：安装

npm install filemanager-webpack-plugin -D

• 第二步：配置vue.config.js

// vue.config.js

const FileManagerPlugin = require('filemanager-webpack-plugin');

const packageName = 'dist'; // 打包的文件夹名
const pluginsArray = [];
if （process.env.VUE_APP_ENV == 'production') {
  pluginsArray.push(
    new FileManagerPlugin({ // 打包为 dist.zip
      onEnd: {
        delete: [`./${packageName}.zip`], // 删除项目根目录下的dist.zip
        archive: [{ // 选择将dist文件夹打包为dist.zip并放在根目录下
          source: packageName,
          destination: `./${packageName}.zip`,
        }]
      },
    })
  );
}

module.exports = {
	plugins: [...pluginsArray]
};