webpack中实现按需加载
2024-08-22 04:39:17
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.js,但是这样看着不是很直观,所以要自己配置单独打包的chunk名字,好吧开始踩坑
最初的代码:
1
2
3
4
5
6
7
|
window.onclick= function (){ require.ensure([], function (){ var $=require( 'jquery' ) console.log($( "body" )); require( "./c" ); }, "oth" ); } |
这里有三个参数,第一个参数是个数组,标明依赖的模块,这些会提前加载,第二个是回调函数,在这个回调函数里面的require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件,当点击时就会加载单独打包的chunk。这里的坑是,我想自己设置个名字叫oth,但是打包后仍然是webpack自动配置的名字,并且路径也不对,这让我郁闷好久啊,官方文档直说配置个名字就可以单独打包成自己写的名字了,根本没说还需要配置什么,终于找了好久终于在网上看到有人说还需要配置chunkFilename,和publicPath,好吧去看这俩的文档解释,才发现在介绍publicPath时提到了按需加载,并且说的不是很直接,意思就是按需加载单独打包出来的chunk是以publicPath会基准来存放的。好吧,另外还要配置chunkFilename:[name].js这样才会最终生成正确的路径和名字
1
2
3
4
5
6
7
8
|
module.exports={ entry: './src/js/a.js' , output:{ path:path.resolve(__dirname, "./dist" ), filename: 'js/a.bundle.js' , publicPath: "./" , chunkFilename: 'js/[name].js' }
|
注意:
这个是wbpack1的用法,后续版本中被import()替代了哦。
最新文章
- python成长之路【第十一篇】:网络编程之线程threading模块
- Android的消息循环机制 Looper Handler类分析
- (ios)MPMoviePlayerController首次播放视频的时候,没有控制条
- 在ROS下编写自己的节点来订阅话题(C++)
- Week1 Team Homework #3: 软件工程在北航
- 第九篇:python高级之操作数据库
- CSS 文件的4种引入方式
- JVM(一)JVM的基本结构
- 初识Redis系列之二:安装及简单使用
- Web前端:博客美化:三、右上角的Github Ribbon
- PhpStorm 常用插件
- 用Python开发小学二年级口算自动出题程序
- worker pool Handling 1 Million Requests per Minute with Golang
- Object.defineProperty(obj,prop,descriptor)使用
- 在Linux环境下使用Apache部署ASP.NET Core
- apache 运行一段时间出现错误
- IOS7 UI设计的十大准则
- 为MyEclipse配置Spring的约束
- Asp.net MVC + Redis(Linux安装Redis)
- 用xpo实现dc技术的关键点-XPO是如何处理接口类型与真实类型的对应关系的
热门文章
- LeetCode 238. Product of Array Except Self (去除自己的数组之积)
- idea 创建多模块依赖Maven项目
- 读书笔记-你不知道的JS中-函数生成器
- Java调用C++类库--JNI
- linux下使用crontab实现定时PHP计划任务失败的原因分析
- A+B problems
- Linux中包管理与定时任务
- Re.findall() &; Re.finditer()的用法
- G彩娱乐网【分享】想要开源自己的代码可以参考一下
- web前端学习路线和步骤