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用法
- 在 index.html 引入
cdn
<script src="xxx"></script>
- 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服务器的稳定和高速 |
压缩 | |
后台预处理 |