webpack动态加载打包chunk命名

时间: 2019-08-21阅读: 645标签: 打包

最近,遇到复杂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 入门):

  1. 按需加载。import()可以在需要的时候,再加载某个模块
  2. 条件加载。import()可以放在if代码块,根据不同的情况,加载不同的模块。
  3. 动态的模块路径。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);
});

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5436

关闭

前端js打包工具

打包工具可以更好的管理html,css,javascript,使用可以锦上添花,不使用也没关系。html好比是房子的地基,css和 javascript是房子的建筑材料,这三个部分一起组成个漂亮的房子

Webpack 打包太慢? 试试 Dllplugin

webpack在build包的时候,有时候会遇到打包时间很长的问题,这里提供了一个解决方案,让打包如丝般顺滑~在用 Webpack 打包的时候,对于一些不经常更新的第三方库

Vue Cli 3 打包配置--自动忽略 console.log 语句

由于去掉 console.log 语句这个功能只有在打包时才需要,所以我们可以加一个判断,只在生产环境时才把上述配置代码加上。

Webpack安装配置及打包详细过程

前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目

webpack打包原理

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

vue实现分环境打包步骤

在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换

webpack打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。

Js模块打包 exports和require 与 export和import 的用法和区别

CommoneJS规定每个文件是一个模块。将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全局环境;

webpack打包时删除console.log,和debugger

开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供了一个非常棒的插件,看代码:

在前端中如何更好地优化打包资源

在前端中但凡谈到打包,肯定要提及到 webpack,毕竟它现在已经是最为流行的打包工具。但 webpack 更多地是表现在 术 上,于是我决定写这篇文章,更多地讲解一些关于 道 的。对于一个前端而言,生产环境的静态资源优化,它既是面试中的高频问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!