哦屋～如此優化能使你項目的速度到達一個逼格！

優化前：

優化後：

思路：

vue打包後會把全部的js封包在vendor.js中，這時候這個文件就會變得很臃腫，以及app.js也挺大的。那麼能夠把這兩個js包進行拆分，用懶加載方式從新打包。還有引用了vue,vue-router,vuex,element等等全局組件都會致使項目在渲染的時候須要等待加載致使速度變緩慢。能夠用cdn引用全局庫來處理(對了，能用cdn儘可能用cdn，至於爲何，用了你就知道)。

步驟一

/src/router/index.js

// 修改前
import Article from './article'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Article',
      component: Article
    },
  ]
})
複製代碼

修改後

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Article',
      component: () => import('../views/article/index.vue')
    },
  ]
})
複製代碼

步驟二

/build/webpack.base.conf.js

externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    'element-ui': 'ELEMENT'
}
複製代碼

對應的引用庫註釋掉 /src/main.js

// import ElementUI from 'element-ui'
// import { Button, Input, Form, FormItem, Message } from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
複製代碼

項目首頁引入cdn，並對cdn失效作處理
/index.html

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css">

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<!--<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>-->

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<script>!window.Vue && document.write(unescape('%3Cscript src="/static/cdn/vue.min.js"%3E%3C/script%3E'))</script>

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>!window.axios && document.write(unescape('%3Cscript src="/static/cdn/axios.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script>!window.VueRouter && document.write(unescape('%3Cscript src="/static/cdn/vue-router.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script>!window.Vuex && document.write(unescape('%3Cscript src="/static/cdn/vuex.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn.bootcss.com/vue-i18n/7.6.0/vue-i18n.min.js"></script>
<script>!window.Vue && document.write(unescape('%3Cscript src="/static/cdn/vue-i18n.min.js"%3E%3C/script%3E'))</script>
<script src="https://unpkg.com/element-ui@2.7.2/lib/index.js"></script>
<script>!window.ELEMENT && document.write(unescape('%3Cscript src="/static/cdn/element.min.js"%3E%3C/script%3E'))</script>
<script src="https://unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script>!window.ELEMENT && document.write(unescape('%3Cscript src="/static/cdn/element-zh.min.js"%3E%3C/script%3E'))</script>
<script> ELEMENT.locale(ELEMENT.lang.zhCN) </script>
複製代碼

兩步優化：就這樣優化就夠了嗎？確實只有這兩步驟速度就有了質的變化了，接着就是細節的處理了，好比基礎的js壓縮，css有壓縮，雪碧圖，減小http請求等等，這邊我想再說的一點就是首屏優化策略，對於首屏加載能夠使用預渲染機制prerender-spa-plugin，可是我測試過，速度並無提高，反而我以爲慢了。簡單的首屏能夠使用這個預渲染機制，還有就是項目部分ssr服務端渲染,只加載用戶看獲得的部分等等。優化的道路任重而道遠，只有不斷求最優解，才能不斷有新大陸發現。

擴展優化插件

webpack-bundle-analyzer 分析項目打包庫

prerender-spa-plugin 預渲染模式

1. 步驟一
2. 步驟二