前端单页面首页加载优化优化简谈

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，欢迎各位指点