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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
图片完美缩放
Sep 07 Javascript
JavaScript使用cookie
Feb 02 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
Vue slot用法(小结)
Oct 22 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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
桌面中心(四)数据显示
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
php去除数组中重复数据
2014/11/18 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
php use和include区别总结
2019/10/13 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
javascript 获取图片颜色
2009/04/05 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
缓刑人员的思想汇报
2014/01/11 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
小学庆六一主持词
2015/06/30 职场文书
python实现局部图像放大
2021/11/17 Python