【学习】Vue 加载优化以及组件异步加载缺点解决方案

7-26日再更新

组件懒加载有三种方式：

1. es6  = () =>import('../../xx')

2. vue异步  = resolve => require(['../../xx'], resolve)

3. webpackrequire.ensure r => require.ensure([], () => r(require('../components/Hello')), 'demo')

1. 组件按需加载 也是一样弃用import 换用require 

 2. 代码分块 

 3. 路由懒加载 结合 Vue 的 异步组件 和 Webpack 的 code splitting feature,可以轻松实现路由组件的懒加载． 

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

/* 另一种写法 */ 

const Foo = resolve => require(['./Foo.vue'], resolve);
复制代码

 4. 压缩（webpack/服务端）

 5. Webpack2 Tree-shaking （清除无用代码） 

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

关于异步组件懒加载：

优点： 减小包体积，提高加载速度

缺点： 需要团队交流； 多次请求造成渲染参差不齐。

解决： 建立多层目录，使用复合方案。

Eg: 

syncCom

commonCom

rootCom

childCom

优点： 适应力强，加载迅速，体验良好

缺点： 还是得团队交流

部分学习自詹一树

转载于:https://juejin.im/post/5b333dd05188257491447710