爲了vue-cli spa項目優化首屏所作的事情

第一次寫 vue spa項目，可是在實踐的過程發現了不少坑，這篇文章主要講述的是spa項目首屏加載過慢的大坑。
在webpack的配置中，在打包的過程當中，會將全部的庫都打包到vendor.js中，因此致使了vendor.js這包過大，而頁面要想出現數據必須在vendor.js加載完成之後，因此後面所作的努力基本就是想辦法把vendor.js的體積變小。

1.externals

在webpack.base.conf.js這個文件中，module.exports輸出的對象裏面加一個key 叫作 externals,配置以下

//webpack.base.conf.js
 externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        // 'vue-lazyload': 'VueLazyload',
        'moment': 'moment',
        // 'element-ui': 'element-ui'
    }
//index.html
    <script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/axios/0.11.0/axios.min.js"></script> -->
    <!-- <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> -->
    <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/1.3.7/index.js"></script>

externals的左邊是給 require用的 ,右邊是給全局調用的。建議使用bootcdn，相對來講算是比較快的cdn了。
還有一種是dll打包，目前沒有實踐過，下次能夠試試。

2.開啓gzip

後端用的是nginx，稍微配置便可開啓gzip

sudo nano /etc/nginx/nginx.conf
在Gzip Settings里加入：

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

開啓了之後，js、css相關的代碼能夠壓縮將近5倍的體積。

3.開啓路由懶加載

開啓了之後不一樣的路由組件能夠分紅不一樣的代碼，從而實現進入相應頁面之後才加載相關代碼。
在官方文檔中有相關實現的代碼，很簡單。

//引入的時候改爲懶加載的形式
const admin = resolve => require(['../views/admin.vue'], resolve);

4.bundleAnalyzerReport檢測包的狀況

在config/index.js中一個相關插件叫作bundleAnalyzerReport，上面有幾行註釋，講的是隻要在打包的時候輸入npm run build --report,就能夠在打包的同時查看每一個打包生成的js，裏面的庫的構成狀況，方便咱們進行相關的刪減，好比有的庫太大了，是否能夠本身實現，有的庫是否有必要，能否刪除之類。

5.服務端加載

額，這個太難搞了，剛入行node.js只會npm這一點相關知識，之後有空要好好學學，據說經過nuxt.js是比較容易上手，還得之後慢慢實踐。畢竟首屏加載，seo優化都得靠SSR(service side render)了。