webpack生产环境优化：懒加载和预加载

转载请注明来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生产环境优化：懒加载和预加载

一、直接加载

浏览器一打开，直接加载了test.js
这里使用了直接导入方式。
直接导入：import { mul } from './test';

 // ./src/js/index.js
//入口文件
 
console.log('index.js被加载了~');
 
/* 直接加载了 */
import { mul } from './test';
 
console.log(mul);
 
document.getElementById('btn').onclick = function () {
    console.log(mul(4, 5));
}

核心配置

 // ./src/js/index.js
console.log('index.js被加载了~');

二、懒加载

懒加载,当文件需要使用时才加载。
需要使用import动态导入方式。

 // ./src/js/index.js
console.log('index.js被加载了~');
 
/*
懒加载
*/
 document.getElementById('btn').onclick = function () {
     //懒加载,当文件需要使用时才加载~
     import(/* webpackChunkName:'test' */'./test')
         .then(({ mul }) => {
             console.log(mul(4, 5));
         })
 }

核心配置

 // ./src/js/index.js
     import(/* webpackChunkName:'test' */'./test')
         .then(({ mul }) => {
            //成功加载时执行。
            ……
         })

webpackChunkName:'test' ：配置打包时的chunk名称，既文件名。

三、预加载

预加载prefetch：会在使用之前，提前加载js文件。
同样需要使用import动态导入方式。
正常加载可以认为是并行加载（同一时间加载多个文件）预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再加载资源。

 //入口文件
console.log('index.js被加载了~');
 
/* 
预加载
*/
document.getElementById('btn').onclick = function () {
    //预加载prefetch：会在使用之前，提前加载js文件.
    //正常情况下加载可以认为是并行加载（同一时间加载多个文件）。
    //实际上预加载 prefetch会等其他资源加载完毕，浏览器空闲了，再加载设置了预加载的资源。
    import(/* webpackChunkName:'test', webpackPrefetch:true */'./test')
        .then(({ mul }) => {
            console.log(mul(4, 5));
        })
}

核心配置

 // ./src/js/index.js
     import(/* webpackChunkName:'test', webpackPrefetch:true */'./test')
         .then(({ mul }) => {
            //成功加载时执行。
            ……
         })

webpackChunkName:'test' ：配置打包时的chunk名称，既文件名。

webpackPrefetch:true：配置预加载模式。

打包时会有prefetch提示。

四、工程文件目录

 # 目录结构
.
├── src
│   ├── index.html
│   └── js
│       ├── index.js      //入口文件
│       └── test.js       //被加载的文件
└── webpack.config.js

 // ./src/js/test.js
 
console.log('test.js被加载了~');
 
export function mul(x, y) {
    return x * y;
}
 
export function count(x, y) {
    return x - y;
}

 <!-- ./src/index.html -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
 
<body>
    <H1>hello lazy loading</H1>
    <button id="btn">加载</button>
</body>
 
</html>

posted @ 2023-08-28 22:20 Eword 阅读(132) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· webpack生产环境优化：缓存

· webpack生产环境优化：externals

· webpack生产环境优化：懒加载和预加载

· webpack懒加载方式

· webpack优化环境配置 - 24.lazy loading

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异

公告

成功就像怀孕，
大家都来恭喜你，
可是没人知道
你被操了多少次

─=≡Σ(((つ•̀ω•́)つ

昵称： Eword
园龄： 5年2个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类 (127)

随笔档案 (52)

阅读排行榜

评论排行榜

1. 一文读懂django-restframeword(DRF)(1)

Eword`s Home

鹰的精神,无人扶我上青云,独身也可登昆仑。

webpack生产环境优化：懒加载和预加载

webpack生产环境优化：懒加载和预加载

一、直接加载

二、懒加载

三、预加载

四、工程文件目录

公告

搜索

常用链接

最新随笔

我的标签

随笔分类 (127)

随笔档案 (52)

阅读排行榜

评论排行榜

最新评论

	// ./src/js/index.js
	//入口文件

	console.log('index.js被加载了~');

	/* 直接加载了 */
	import { mul } from './test';

	console.log(mul);

	document.getElementById('btn').onclick = function () {
	console.log(mul(4, 5));
	}

	// ./src/js/index.js
	console.log('index.js被加载了~');

	/*
	懒加载
	*/
	document.getElementById('btn').onclick = function () {
	//懒加载,当文件需要使用时才加载~
	import(/* webpackChunkName:'test' */'./test')
	.then(({ mul }) => {
	console.log(mul(4, 5));
	})
	}

	//入口文件
	console.log('index.js被加载了~');

	/*
	预加载
	*/
	document.getElementById('btn').onclick = function () {
	//预加载prefetch：会在使用之前，提前加载js文件.
	//正常情况下加载可以认为是并行加载（同一时间加载多个文件）。
	//实际上预加载 prefetch会等其他资源加载完毕，浏览器空闲了，再加载设置了预加载的资源。
	import(/* webpackChunkName:'test', webpackPrefetch:true */'./test')
	.then(({ mul }) => {
	console.log(mul(4, 5));
	})
	}

	# 目录结构
	.
	├── src
	│ ├── index.html
	│ └── js
	│ ├── index.js //入口文件
	│ └── test.js //被加载的文件
	└── webpack.config.js

	// ./src/js/test.js

	console.log('test.js被加载了~');

	export function mul(x, y) {
	return x * y;
	}

	export function count(x, y) {
	return x - y;
	}

	<!-- ./src/index.html -->

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>webpack</title>
	</head>

	<body>
	<H1>hello lazy loading</H1>
	<button id="btn">加载</button>
	</body>

	</html>