1. 圖片優化

   首先是UI設計師對圖片進行一次壓縮，到了前端工程師手上再進行一次壓縮，推薦網站https://tinypng.com/。本人使用的技術棧時VUE和webpack，代碼壓縮在webpack中能夠配置，再也不詳述。javascript

2. webpack打包優化

    若是按照vue-cli的正常配置進行打包，打包出來的包會很是大，即便進行了壓縮。打包出來的東西分爲2部分，第一部分是vue組件，以及業務邏輯部分；第二部分爲插件打包，例如vue，vue-router，axios，vuex，vueScroll等插件。html

   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

在vue資源管理文件build文件夾中的webpack.base.conf.js，此js文件是vue基礎打包配置，在此配置中加入java

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
    'mui': 'mui'
  },

externals中的鍵值對格式爲 'aaa' : 'bbb', 其中，aaa表示要引入的資源的名字，bbb表示該模塊提供給外部引用的名字，由對應的庫自定。例如，vue爲Vue，vue-router爲VueRouter.webpack

3. 因爲本公司的服務器有點low，即便圖片進行了2次壓縮，可是圖片加載的速度仍是慢，此時的加載效果是，html加載出來了，圖片還在一幀一幀的往下加載，很low。解決辦法：圖片尚未加載出來的時候，不顯示，加載出來以後，有動畫效果的顯示出來。ios

地址： 本人做品www.mofamg100.cn，歡迎各位指點web