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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
js自定义select下拉框美化特效
May 12 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
JS实现可视化音频效果的实例代码
Jan 16 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采用curl实现伪造IP来源的方法
2014/11/21 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
wxPython中listbox用法实例详解
2015/06/01 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
团日活动总结
2014/04/28 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
校本研修个人总结
2015/02/28 职场文书
护理专业自荐信范文
2015/03/06 职场文书
运动会入场词
2015/07/18 职场文书