网上说这块的很多，但是没看到有一篇能说全的。这里就说说怎么通过异步和懒加载的形式把首屏代码实现到最小。
注意：首屏的代码不要异步加载，非首屏代码异步加载。不然初始代码加载完成后，还有等运行后再去加载首屏代码，反而拉慢首屏显示。
一、现在异步组件最常见的技术用两种。
1、依赖require
const Editor = resolve => require(['@/views/Editor'], resolve)
2、webpack 2 + ES6
const Editor = () => import('@/views/Editor')
二、下面使用require来实现异步加载
1、异步路由
import indexPage from '@/views/indexPage';
export default new Router({
routes: [
{
path: '/index',
name: '主页',
component: indexPage // 首屏代码不要异步加载
},
{
path: '/comment/:iid',
name: '评论',
component: resolve => require(['@/views/Editor'], resolve) // 异步加载非首屏页面
},
],
})
2、全局异步组件
可以同时require组件的css，只需要最后resolve传参的是组件
// main.js
Vue.component('swiper', (resolve) => require(['vue-awesome-swiper', 'swiper/dist/css/swiper.css'], ({swiper}) => resolve(swiper)))
3、单个组件内的异步组件
export default {
name: 'editor',
components: {
appBox: resolve => require(['@/components/layout'], resolve)
},
...
}
4、懒加载第三方类库
项目中会用到一些第三方类库，如果类库比较大，而且可以不用第一时间处理，则可以考虑把它懒加载，来加速页面的响应速度
require(['lrz'], (lrz) => {
lrz(fileInfo, {fieldName: 'imgTp', width: 960, quality: 0.6})
.then((rst) => {
})
.catch((err) => {
console.log(err);
})
})
