哦屋～如此优化能使你项目的速度到达一个逼格！

优化前：

优化后：

思路：

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服务端渲染,只加载用户看得到的部分等等。优化的道路任重而道远，只有不断求最优解，才能不断有新大陆发现。