Vue SPA单页应用首屏优化实践(2)

const Foo = resolve => { /* require.ensure 是 Webpack 的特殊语法，用来设置 code-split point （代码分块）*/ require.ensure(['./Foo.vue'], () => { resolve(require('./Foo.vue')) }) } /* 另一种写法 */ const Foo = resolve => require(['./Foo.vue'], resolve);

不需要改变任何路由配置，跟之前一样使用 Foo：

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

4. Webpack2 Tree-shaking

Tree-shaking 用来消除没有用到的代码．

个人小项目一般用不到tree-shaking．因为你不会写没用到的代码．规模很大的项目或许可以尝试使用它．

5. 减少XHR中不必要的数据．

比如我的项目中，首页只需要博客Title,id和Tags．Time和Content不需要了，况且Content一般还很大(一般一篇10KB左右)．

6. SSR(Server Side Render/服务端渲染)

这个有点难搞．但效果貌似挺不错．我之前在Vue文档中简单看了一边，打算以后有需求了再搞不迟．

7. 其他诸如图片懒加载就不赘述了，前端开发者应该有的常识．