摘要:前端的代码分片,或者说是按需加载,本质上是由于前端页面越来越复杂,代码体积越来越大,程序员需要对页面资源的加载做细粒度的控制。这里需要说一下的是的第三参数,是这个分片的。
前端的代码分片,或者说是按需加载,本质上是由于前端页面越来越复杂,代码体积越来越大,程序员需要对页面资源的加载做细粒度的控制。按需加载当然是好东西,但是会让页面逻辑变得更加复杂。好在webpack出现,让按需加载变得简单多了。
我们来做一个简单的demo,完整代码
demo的功能很简单,单击一个按钮,然后去加载一个js文件并执行。
index.html文件:
index.js文件
document.getElementById("btn").addEventListener("click",function(){ require.ensure([],()=>{ let hello = require("./Hello").default; hello(); },"Hello") })
Hello.js文件
export default function hello(){ alert("hello.") }
在 click 的事件处理函数中,通过 require.ensure标记分割点,然后加载Hello.js并赋值给变量hello,最后调用该方法。这里需要说一下的是require.ensure的第三参数,是这个分片chunk的name。如果不加这个参数,默认会以chunkid来命名该文件。这个参数在开发环境还是很有用的,毕竟1.js的文件名,让人很难定位文件。
由于 ES2015 Loader spec 定义了 import() 方法来在运行时动态的加载javascript文件,所以webpack也把import()作为split code的分割点。
如果想用酷炫的import()语法,还需要安装一个插件:
npm i babel-plugin-syntax-dynamic-import --save-dev。然后,就可以把上面的 index.js文件改成:
document.getElementById("btn").addEventListener("click",function(){ import("./Hello").then((Hello) => { let hello = Hello.default; hello(); }).catch(err => console.log("Failed to load moment", err)) })
import()支持promise语法,所以可以用catch来处理加载文件引起的异常。但是,它也有它的弱点,import()无法给这个文件命名(类似于require.ensure的第三个参数),这样打包出来的文件都是用数字来标示的,非常难以区分,在开发环境下,会使定位错误变的更加困难。
此外,这两种语法在引用文件时,文件路径都不可以是表达式。例如:
require.ensure([],()=>{ let path = "./Hello"; let hello = require(path).default; hello(); },"Hello")
这样会报错,无法正常加载文件。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82334.html
摘要:百度地图创建标签进行加载使用百度地图需要百度地图添加扩展,用于让百度地图支持地图可能会遇见两个问题地图图片错位忘记加载中使用的一个主要问题是默认图标的加载问题,详见另外也可以考虑使用动态创建标签的方法,类似百度地图加载百度地图因为本身支持的 webpack+百度地图 创建 script标签进行加载 export function MP(ak){ return new Prom...
webpack4 提倡, 一旦用了这个, 不能使用style-loader 以及css module 安装 npm install --save-dev mini-css-extract-plugin rules rules: [ { test: /.css$/, use: [ { loader: MiniCssExtractPlug...
摘要:以为例,编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化,然后为你执行一系列的自动化操作,同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一:前端工程化的发展 很久以前,互联网行业有个职位叫做 软件开发工程师 在那个时代,大家可能...
摘要:有时候觉得一个工具的学习成本还是很大的,所以唯一的感觉就是随随便便放弃一个工具是多么的难。指定执行的方法命令。这时候我们再看一下目录会多出来一个目录说明你的处女终于破了。 唠唠嗑 前几天在学习webpack时,踩过很多坑,也听过webapck是多么的哔哔哔哔~~, 本人学习的工具有很多,比如sass的初级工具compass,自动化工具gulp,grunt,一起其他杂七杂八的工具。有时...
阅读 961·2023-04-26 02:49
阅读 1172·2021-11-25 09:43
阅读 2541·2021-11-18 10:02
阅读 2919·2021-10-18 13:32
阅读 1281·2019-08-30 13:54
阅读 2074·2019-08-30 12:58
阅读 3008·2019-08-29 14:06
阅读 2154·2019-08-28 18:10