第一次写 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)了。