Webpack按需加载打包chunk命名的方法
前言
最近，遇到复杂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是ECMAScript6Module的语法，import是静态执行，这里不多说，可以去看import命令。
import(specifier)
上面代码中，import函数的参数specifier，指定所要加载的模块的位置，而且==specifier可以是一个方法，动态的生成模块路径==。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
import()函数是ECMAScriptStage3草案阶段的语法；用于完成动态加载即运行时加载，可以用在任何地方。import()函数返回的是一个Promise。类似于CommonJs的require()，区别主要是前者是异步加载，后者是同步加载。
import的应用场景有以下三种(参考自ECMAScript6入门):
- 按需加载。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] | 模块标识符(moduleidentifier)的hash |
| [chunkhash] | chunk内容的hash |
| [name] | 模块名称 |
| [id] | 模块标识符(moduleidentifier) |
| [query] | 模块的query，例如，文件名?后面的字符串 |
| [function] | 方法，可以返回一个filename字符串 |
不同的是chunkFilename我们不能想filename中的name那样，可以在entry中定义。也就是说对于chunkFilename，默认[id]和[name]是一样的，那么如何自定义name呢？
如何命名chunk的名称
只能说哪里有压迫，哪里就会有反抗，chunkFileName不能灵活自定义，这谁能忍，于是便有了/*webpackChunkName:""*/，号称是MagicComments（魔术注释法）。
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可以独立命名，是的就是这样。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。