Webpack按需加载打包chunk命名的方法


Posted in Javascript onSeptember 22, 2019

前言

最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点:

  • 使用Webpack如何做按需加载
  • filename和chunkFilename的区别
  • 如何命名chunk的名称(webpackChunkName)

1 使用Webpack如何做按需加载

大家都知道Webpack是现在流行的前端打包编译工具,通过模块之间的依赖关系,将代码打包组织到一起。Webpack目前已经到v4.x,不同版本版支持按需加载的方式不同,主要有两种:

  • webpack1.x 中提供了 require.ensure()
  • webpack2.x 中提供了 import()

require.ensure()

// 举例
require.ensure([], function(require){
 require('b');
});

webpack 在编译时,会静态地解析代码中的 require.ensure(),同时将[模块b] 添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

为什么说到是静态分析,我们可以看到下面的require.ensure语法,第二个参数callback就是一个回调函数。其中需要注意的是,这个回调函数有一个参数require,通过这个require就可以在回调函数内按需引入其他模块。==值得注意的是,虽然这个require是回调函数的参数"module",理论上可以换其他名称,但是实际上是不能换的,否则webpack就无法静态分析的时候处理它。==

require.ensure(
 dependencies: String[], 
 callback: function(require){
  require('module');
 }, 
 errorCallback: function(error){}, 
 chunkName: String
)

import()

要注意的是import() 函数不同于import命令,import 是 ECMAScript 6 Module 的语法,import 是静态执行,这里不多说,可以去看import 命令。

import(specifier)

上面代码中,import函数的参数specifier,指定所要加载的模块的位置,而且==specifier可以是一个方法,动态的生成模块路径==。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要是后者为动态加载。

import()函数是 ECMAScript Stage 3 草案阶段的语法;用于完成动态加载即运行时加载,可以用在任何地方。import()函数 返回的是一个 Promise。类似于 CommonJs 的 require() ,区别主要是前者是异步加载,后者是同步加载。

import的应用场景有以下三种 (参考自ECMAScript 6 入门):

  • 按需加载。import()可以在需要的时候,再加载某个模块
  • 条件加载。import()可以放在if代码块,根据不同的情况,加载不同的模块。
  • 动态的模块路径。import()允许模块路径动态生成。

用法大致如下:

import('./myModule.js')
 .then(myModule => {
  console.log(myModule.default);
 });

小结

目前我们用的比较多的是import来做按需加载,模块路径可以动态生成,更适合现在的应用场景。

filename和chunkFilename的区别

能够打包之后,我们会发现打包出来的chunk的路径和命名是极其简单的1,2,3...这样子的数字,对于我们要定制路径和名字的话,就会涉及到filename和chunkFilename。

  • output.filename 决定了每个入口(entry) 输出 bundle 的名称。
  • output.chunkFilename 决定了非入口(non-entry) chunk 文件的名称。

常用的Webpack配置如下

module.exports = {
 //...
 output: {
  filename: '[name].[hash].bundle.js',
  chunkFilename: '[name].[hash].chunk.js',
 }
};

filename和chunkFilename对应的结果可以由以下参数拼接或者返回:

模板 描述
[hash] 模块标识符(module identifier)的 hash
[chunkhash] chunk 内容的 hash
[name] 模块名称
[id] 模块标识符(module identifier)
[query] 模块的 query,例如,文件名 ? 后面的字符串
[function] 方法,可以返回一个filename字符串

不同的是chunkFilename我们不能想filename中的name那样,可以在entry中定义。也就是说对于chunkFilename,默认[id]和[name]是一样的,那么如何自定义name呢?

如何命名chunk的名称

只能说哪里有压迫,哪里就会有反抗,chunkFileName不能灵活自定义,这谁能忍,于是便有了/* webpackChunkName: "" */,号称是Magic Comments(魔术注释法)。

Webpack通过增加内联注释来告诉运行时,该有怎样的行为。通过向import中添加注释,我们可以执行诸如命名chunk或选择不同模式之类的操作。

这里着重讲一下webpackChunkName,它其实就是对chunkFilename定义时[name]值的改写,/* webpackChunkName: "hello" */,意味着[name]等于hello。

于是上面的代码就会按照下面的方式来写,打包出来的chunk文件将会出现在plugins文件夹下,名字叫myModule.a2d1d5d8e7d5d4d4d4se.chunk.js。

import(/* webpackChunkName: "plugins/myModule" */
  './myModule.js')
  .then(myModule => {
    console.log(myModule.default);
  });

更多的魔术注释,请参考Webpack官方文档。

结束了

到此为止,我们已经可以将代码打包到多个文件,每个chunk可以独立命名,是的就是这样。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
javascript二维数组转置实例
Jan 22 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 #Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 #Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
vue实现文件上传读取及下载功能
Nov 17 #Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 #Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 #Javascript
You might like
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
tagName的使用,留一笔
2006/06/26 Javascript
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python双向链表实现实例代码
2013/11/21 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
使用python+whoosh实现全文检索
2019/12/09 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
小学教师学期末自我评价
2013/09/25 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
工作自我评价范文
2015/03/05 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
python生成随机数、随机字符、随机字符串
2021/04/06 Python