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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
jquery 指南/入门基础
2007/11/30 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
简单了解JavaScript作用域
2020/07/31 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
深入理解javascript中的this
2021/02/08 Javascript
python中的闭包用法实例详解
2015/05/05 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
教师申诉制度
2014/01/29 职场文书
中学生差生评语
2014/01/30 职场文书
优秀公益广告词大全
2014/03/19 职场文书
勤俭节约倡议书
2014/04/14 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2019财务转正述职报告
2019/06/27 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Python实现生活常识解答机器人
2021/06/28 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang