Vue应用优化

分析工具

安装

cnpm intall webpack-bundle-analyzer –save-dev

配置 vue.config.js

module.exports = {
  chainWebpack: (config) => {
    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')
      }
    }
  }
}

使用

npm run build --report

浏览器会以可视化方式显示各文件大小

路由懒加载

提前加载

import loginIndex from '../views/login/index.vue'
/* ... */

const routes = [
  {
    path: '/',
    component: loginIndex
  }
  /* ... */

]

懒加载

const routes = [
  {
    path: '/',
    component: () => import('../views/login/index.vue')
  }
  /* ... */
]

只有红色部分需要首页加载，其他用到时再加载

插件优化

elementUI(优化加载≈60KB)

全部引入方式：
main.js：

import 'element-ui/lib/theme-chalk/index.css'
import elementui from 'element-ui'
Vue.use(elementui)

按需引入方式：官方示例
babel.config.js修改为：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        'modules': false
      }
    ]
  ],
  plugins: [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}

main.js：

import 'element-ui/lib/theme-chalk/index.css'
import { 
  Avatar,
  Button,
  Card,
  Loading,
  Message,
  MessageBox,
  Table,
  TableColumn,
  Timeline,
  TimelineItem
} from 'element-ui'

Vue.use(Avatar);
Vue.use(Button);
Vue.use(Card);
Vue.use(Loading);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Timeline);
Vue.use(TimelineItem);

Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$message = Message;

局部注册

懒加载组件
比如table组件太大，不想在首页加载，可以局部注册达到懒加载的目的

import { Table, TableColumn } from 'element-ui'

export default {
    components: {
        "el-table": Table,
        "el-table-column": TableColumn
    }
}

Bootstrap(优化加载≈200KB)

如果只是使用bootstrap的样式，可以不用引入js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

echart(优化加载≈1700KB)

未优化
在需要使用的组件内引入全部

import echarts from 'echarts';

按需引入 官方链接
引入精简版的echarts，然后按需引入组件

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/title';
import 'echarts/lib/chart/line';
/* ... */

cdn加速

使用本地npm模块

• 本地需要安装

npm install xxx

• 使用时需要import导入

import axios from 'axios'

• 导致用户都从本服务器访问造成网络卡顿

使用cdn服务

• 本地不需要npm安装
• 使用时不需要import导入（导入也可以不影响运行）
• 用户从cdn服务器和本服务器同时访问减少卡顿

字节跳动静态资源公共库

cdn用法

1. 在 index.html 引入cdn

<script src="xxx"></script>

2. vue.config.js 声明不需要使用本地包的插件(脚本)

module.exports = {
  configureWebpack: {
    externals: {
      'axios': 'axios',
      'mockjs': 'mockjs',
      'jquery': 'jQuery',
      'echarts': 'echarts',  // 使用cdn就不需要上面的按需加载的步骤了
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter'
      /* *** */
    }
  }
}

使用purgecss精简css

安装
需要装3个

cnpm i --save-dev glob-all purgecss-webpack-plugin path

配置
修改 vue.config.js ：

const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')

module.exports = {
	configureWebpack: {
		plugins: [
			new PurgecssPlugin({
				paths: glob.sync([
					path.join(__dirname, './public/index.html'),
					path.join(__dirname, './src/**/*.vue'),
					path.join(__dirname, './src/**/*.js')
				])
			})
		]
	}
}

效果明显，普遍达到 90% 以上优化率

总结

方案	释义
懒加载	首页加载慢或加载了用户体验也没什么改善的可以懒加载
精简代码	插件中用不到的css和js不必加载
cdn加速	减少本服务器负担，但也要注意cdn服务器的稳定和高速
压缩
后台预处理