1. 图片优化
首先是UI设计师对图片进行一次压缩,到了前端工程师手上再进行一次压缩,推荐网站https://tinypng.com/。本人使用的技术栈时VUE和webpack,代码压缩在webpack中可以配置,不再详述。
2. webpack打包优化
如果按照vue-cli的正常配置进行打包,打包出来的包会非常大,即使进行了压缩。打包出来的东西分为2部分,第一部分是vue组件,以及业务逻辑部分;第二部分为插件打包,例如vue,vue-router,axios,vuex,vueScroll等插件。
a. 第一部分:一般的单页面都会涉及到路由加载。在第一次加载的时候,只需要加载首页的路由即可,其他的路由可以进行懒加载设置。vue路由懒加载有3种方法可以实现
/*1. vue异步组件技术 */
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'],resolve)
},{
path: '/about',
name: 'about',
component: resolve => require(['@/components/about'],resolve)
}
// 2.下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。(官方网站推荐)
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
/* 3.组件懒加载: webpack提供的require.ensure() */
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
path: '/about',
name: 'about',
component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}
需要注意的是:require或者import该组件进行懒加载后,不能在路由外在进行import该组件,否则webpack打包不生效。
b. 第二部分:减小第三方插件的包。相对从服务器加载数十甚至数百兆的资源,更倾向从cdn引入。
具体做法: 在index.html中加入vue,vuex等资源
在vue资源管理文件build文件夹中的webpack.base.conf.js,此js文件是vue基础打包配置,在此配置中加入
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'mui': 'mui'
},
externals中的键值对格式为 'aaa' : 'bbb', 其中,aaa表示要引入的资源的名字,bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,vue-router为VueRouter.
3. 由于本公司的服务器有点low,即使图片进行了2次压缩,但是图片加载的速度还是慢,此时的加载效果是,html加载出来了,图片还在一帧一帧的往下加载,很low。解决办法:图片还没有加载出来的时候,不显示,加载出来之后,有动画效果的显示出来。
地址: 本人作品www.mofamg100.cn,欢迎各位指点