原文：https://www.cnblogs.com/zhanyishu/p/6587571.html, 根据原文，做了相应的补充。请注意 ‘补充’后的说明非引自原文。
二、为什么需要懒加载
在单页应用(SPA)中，如果没有应用懒加载，运用webpack打包后的文件异常大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承受的加载压力，减少首页加载用时。
三、如何与webpack配合实现组件懒加载
1、在webpack配置文件中的output路径配置chunkFilename属性，chunkFilename 路径将会作为组件懒加载的路径。
output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: 'chunk[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
}
补充： Vue3 中在根目录下新增vue.config.js，配置如下：详情配置参照Vue3 webpack配置官网
...
module.exports = {
path: '/',
configureWebpack: (config) => {
if(process.env.NODE_ENV == 'production') {
// 为生产环境修改配置
config.mode = 'production';
Oject.assign(config, {
output: {
...config.output,
filename: `static/js/[name].[chunkhash].${version}.js`,
chunkFilename: `static/js/[name].[chunkhash].${version}.js`
}
...
})
}
...
}
2 配合webpack支持的异步加载方法
. resolve => require([URL], resolve) 支持性好
. () => system.import(URL) webpack2官网已声明将逐渐废除，不推荐
. () => import(URL) webpack2 官网推荐使用，属于 es7 范围，需要配合babel的syntax-dynamic-import插件使用, 具体使用方法如下
npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
} }]
补充： Vue3 中第三方插件配置在 pluginOptions中
四 具体实例中实现懒加载
1 路由配置异步组件
export default new Router({
routes: [
{ mode: 'history',
path: '/my',
name: 'my',
component: resolve => require(['../page/my/my.vue'], resolve) // 懒加载
} ]
})
2 实例中配置异步组件
components: {
historyTab: resolve => { require(['../../component/historyTab/historyTab.vue'], resolve);
// historyTab: () => import('../../component/historyTab/historyTab.vue')
}
3. 全局注册异步组件
vue.component('mideaHeader', () => {
System.import('./component/header/header.vue')
})
五、配置异步组件实现懒加载的问题分析
1 Q:多次进出同一个异步加载页面是否会造成多次加载组件？
A： 否，首次需要用到组件时浏览器会发送请求加载组件，加载完将会缓存起来，以供以后再次用到该组件时调用。
2 Q: 在多个地方使用同一个异步组件时是否造成多次加载组件？如：
// page a
export default {
components: {
historyTab: resolve => {require(['url'], resolve)}
}}
// Page b
export default {
components: {
historyTab: resolve => {require(['url'], resolve)}
}}
A: 否，理由同上
3 Q: 如果在两个异步加载的页面中分别同步与异步加载同一个组件，是否会造成资源重用？如下：
// Page a
import historyTab from '..url';
export default {
components: {historyTab}
}
Page b
export default {
components: {
historyTab: resolve => { require(['.. Url'], resolve) }
}}
A: 会，将会造成资源重用，根据打包后输出的结果来看，Page a中会嵌入historyTab组件的代码，Page b中的historyTab组件还是采用异步加载的方式，另外打包chunk;
解决方案： 组件开发时，如果跟页面没有导入组件的情况下，而是在其他异步加载页面中同时用到组件，那么为实现资源最大利用，在协同开发的时候全部人都使用异步加载组件。
4 Q:在异步加载页面中嵌入异步加载的组件时，对页面是否会有渲染延时影响？
A: 会，异步加载的组件将会比页面中其他元素滞后出现，页面会有瞬间闪跳影响；
解决方案：因为在首次加载组件的时候会有加载时间，出现页面滞后，所有需要合理的进行页面结构设计，避免首次出现跳闪现象。
六、懒加载的最终实现方案
1. 路由页面以及路由页面中的组件全都使用懒加载
优点： a 最大化的实现随用随载
b 团队开发不会因为沟通问题造成资源重复浪费
缺点： a 当一个页面嵌套多个组件时，将发送多次http请求，可能造成网页显示过慢且渲染参差不齐的问题
2. 路由页面使用懒加载，路由页面中的组件按需进行懒加载，即 如果组件不大且使用不太频繁，直接在路由页面中导入组件，如果组件不大且使用不太频繁，直接在路由页面中导入组件，如果组件使用较为频繁使用懒加载
优点： 能减少页面中的http请求，页面显示效果好
缺点： 需要团队事先交流，在框架中分别建立懒加载组件和非懒加载组件文件夹
3. 路由页面使用懒加载，在不特别影响首页显示延迟的情况下，根页面合理导入复用组件，再结合方案2
优点： 合理解决首页延迟显示问题；；能够最大化的减少http请求，且做其他路由页面的显示效果最佳
缺点： 需要团队交流，建立合理区分各种加载方式的组件文件夹
七、采用第三种方案进行目录结构设计
懒加载最终解决方案
网友评论