在使用elementUI构建公司管理系统时,发现首屏加载时间长,加载的网络资源比较多,对系统的体验性会差一点,而且用webpack打包的vuejs的vendor包会比较大。所以通过搜集网上所有对于vuejs项目的性能优化,做了有关3方面的优化建议,主要包括:上线代码包打包、源码编写优化、用户体验优化。(下面的优化建议只在vue-cli脚手架下做过测试,详情请参考)
屏蔽sourceMap
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/ndindex.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css','svg'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/ndindex.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css','svg'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
ResponseHeader- content-encoding:"gzip"
对路由组件进行懒加载
在路由配置文件里,这里是router.js里面引用组件。如果使用同步的方式加载组件,在首屏加载时会对网络资源加载加载比较多,资源比较大,加载速度比较慢。所以设置路由懒加载,按需加载会加速首屏渲染。在没有对路由进行懒加载时,在Chrome里devtool查阅可以看到首屏网络资源加载情况(6requests 3.8MB transfferred Finish:4.67s DOMContentLoaded 2.61s Load 2.70s)。在对路由进行懒加载之后(7requests 800kb transffered Finish2.67s DOMContentLoaded 1.72s Load 800ms),可以看见加载速度明显加快。但是进行懒加载之后,实现按需加载,那么项目打包不会把所有js打包进app.[hash].js里面,优点是可以减少app.[hash].js体积,缺点就是会把其它js分开打包,造成多个js文件,会有多次https请求。如果项目比较大,需要注意懒加载的效果。
// 实现懒加载方式
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router({
mode: "history",
base: "/facex/district/",
routes: [
{ path: "/", redirect: "index" },
{
path: "/",
name: "home",
component: resolve=>require(["@/views/home"],resolve),
children: [
{
// 员工查询
path: "/employees",
component: resolve=>require(["@/components/employees"],resolve)
},
{
// 首页
path: "/index",
component: resolve=>require(["@/views/index"],resolve)
},
{
// 访客查询
path: "/visitorlist",
component: resolve=>require(["@/components/visitorlist"],resolve)
},
{
path: "/department",
component: resolve=>require(["@/views/department"],resolve)
},
//识别查询
{
path: "/discriminate",
component: resolve=>require(["@/components/discriminate"],resolve)
},
{
path: "/addDevice",
component: resolve=>require(["@/views/addDevice"],resolve)
},
{
path: "/districtNotice",
component: resolve=>require(["@/components/districtNotice"],resolve)
}
]
},
{
path: "/noticeList",
name: "noticeList",
component: resolve=>require(["@/views/noticeList"],resolve)
},
{
path: "/login",
name: "login",
component: resolve=>require(["@/views/login"],resolve)
},
{
path: "/register",
name: "register",
component: resolve=>require(["@/views/register"],resolve)
},
{
path: "/setaccount",
name: "setaccount",
component:resolve=>require(["@/views/setaccount"],resolve)
},
{
path: "/addGroup",
name: "addGroup",
component:resolve=>require(["@/views/addGroup"],resolve)
},
{
path: "/guide",
name: "guide",
component:resolve=>require(["@/components/guide"],resolve)
},
{
path: "/addNotice",
name: "addNotice",
component: resolve=>require(["@/views/addNotice"],resolve)
}
]
});i
better-click防止iphone点击延迟
菊花loading
菊花loading,在加载资源过程之中,可以提供loading。此菊花loading不是那菊花。所以可以自由选择自己喜欢的菊花。
太帅
骨架屏加载
在首屏加载资源较多,可能会出现白屏和闪屏的情况。体验不好。盗图一波,小米商城使用骨架屏进行首屏在资源数据还没有加载完成时显示,给很好的体验效果。
2018052209545810.gif
引用参考:
Vue页面骨架屏的实现方法
浅谈 Vue 项目优化
Vue 初始化性能优化
Vue 性能优化经验总结
路由懒加载
VUE2组件懒加载浅析
基于VUE的SPA单页应用开发-加载性能篇
作者:Evtion
链接:https://www.jianshu.com/p/41075f1f5297
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章