require-ensure
require-ensure
- 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。
- 语法:require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
- dependencies: 依赖的模块数组
- callback: 回调函数,该函数调用时会传一个require参数
- chunkName: 模块名,用于构建时生成文件时命名使用
- 注意点:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。
这里有三个参数,第一个参数是个数组,标明依赖的模块,这些会提前加载,第二个是回调函数,在这个回调函数里面的require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件,当点击时就会加载单独打包的chunk。这里的坑是,我想自己设置个名字叫oth,但是打包后仍然是webpack自动配置的名字,并且路径也不对,这让我郁闷好久啊,官方文档直说配置个名字就可以单独打包成自己写的名字了,根本没说还需要配置什么,终于找了好久终于在网上看到有人说还需要配置chunkFilename,和publicPath,好吧去看这俩的文档解释,才发现在介绍publicPath时提到了按需加载,并且说的不是很直接,意思就是按需加载单独打包出来的chunk是以publicPath会基准来存放的。好吧,另外还要配置chunkFilename:[name].js这样才会最终生成正确的路径和名字
webpack-dev-server环境下,path、publicPath、区别与联系
path:指定编译目录而已(/build/js/),不能用于html中的js引用。
publicPath:虚拟目录,自动指向path编译目录(/assets/ => /build/js/)。html中引用js文件时,必须引用此虚拟路径(但实际上引用的是内存中的文件,既不是/build/js/也不是/assets/)。
require-ensure的更多相关文章
- webpack ------require,ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- webpack中利用require.ensure()实现按需加载
webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- 在vue中使用import()来代替require.ensure()实现代码打包分离
最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...
- require.ensure的用法;异步加载-代码分割;
webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...
- vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...
- react开发中如何使用require.ensure加载es6风格的组件
其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').d ...
- vue按需加载组件-webpack require.ensure
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- require.ensure和require.context
require.ensure和require.context https://www.cnblogs.com/fantasy-zxf/p/6760390.html https://www.jiansh ...
随机推荐
- 分页技巧__在项目中使用QueryHelper辅助对象实现分页效果
分页技巧__在项目中使用QueryHelper辅助对象实现分页效果 QueryHelper 用于辅助拼接HQL语句 addCondition("t.type=?", "精 ...
- Hibernate_day04--课程安排_Hibernate查询方式_对象导航查询_OID查询
Hibernate_day04 上节内容 今天内容 Hibernate查询方式 对象导航查询 OID查询 HQL查询 查询所有 条件查询 排序查询 分页查询 投影查询 聚集函数使用 QBC查询 查询所 ...
- 模拟http请求 带 chunked解析办法二
以PHP代码为例 //这个是解析chuned块 get_chunk_data($fsock) { $data = ''; while(true) { $len = hexdec(fgets($fsoc ...
- [JAVA]基于微信公众平台开放接口编写的sdk
最近在研究微信公众平台提供的公众服务号,以及提供的开放接口. 写了一个相对来说比较简单的基于java的微信sdk,目前实现的功能没有覆盖所有接口. 有兴趣的话,大家可以在这个基础上进行改进和完善,这样 ...
- 追踪溯源--抓住隐藏在NAT后面的罪犯
零.绪论: 水一篇,很小,只是一点思路记录,在工作中经常遇到的一类小问题.NAT后面的地址如何追查下去,推动网络整改不现实,总还要有一些手段来确认. 一.背景: 全球IPv4地址越来越少,也越来越贵, ...
- 【BZOJ4275】[ONTAK2015]Badania naukowe DP
[BZOJ4275][ONTAK2015]Badania naukowe Description 给定三个数字串A,B,C,请找到一个A,B的最长公共子序列,满足C是该子序列的子串. Input 第一 ...
- 【BZOJ2253】[2010 Beijing wc]纸箱堆叠 cdq分治
[BZOJ2253][2010 Beijing wc]纸箱堆叠 Description P 工厂是一个生产纸箱的工厂.纸箱生产线在人工输入三个参数 n p a , , 之后,即可自动化生产三边边长为 ...
- unicode转换中文
<!doctype html><html lang="en"> <head> <meta http-equiv="Refres ...
- Freebsd下用pureftpd配置FTP服务器
pureftpd安装配置简明说明 1.下载 http://sourceforge.net/projects/pureftpd/ 最新版本是pure-ftpd-1.0.16a.tar.bz2 BSD自 ...
- 基于ZooKeeper的服务注册中心
本文介绍基于ZooKeeper的Dubbo服务注册中心的原理. 1.ZooKeeper中的节点 ZooKeeper是一个树形结构的目录服务,支持变更推送,因此非常适合作为Dubbo服务的注册中心. 注 ...