webpack动态加载打包chunk命名入门指南_打包入门百科

最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点:使用Webpack如何做按需加载filename和chunkFilename的区别如何命名chunk的名称(webpackChunkName)1 使用Webpack如何做按需加载大家都

webpack动态加载打包chunk命名入门指南

最近,遇到复杂h5页面开发,为了优化H5首屏加载速度,想到使用按需加载的方式,减少首次加载的JavaScript文件体积,于是将处理过程在这里记录一下,涉及到的主要是以下三点:

webpack动态加载打包chunk命名入门指南_打包入门百科

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可以独立命名,是的就是这样。

海计划公众号
(0)
上一篇 2020/03/26 23:28
下一篇 2020/03/26 23:28

您可能感兴趣的内容

  • jquery选择图片url转base64编码指南教程_编码菜鸟攻略

    HTMLJQ$(‘.upload-img’).on(‘change’,function(){var file = this.files[0];// 图片后缀 var suffix = file.name.split(“.”)[1];var reader = new FileRe

    2020/03/26
  • 小程序框架菜鸟教程网推荐多款高质量的小程序框架组件_小程序小白入门

    小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。 1、 mpvuempvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime

    2020/04/03
  • 表现与数据分离、web语义化的理解 使用教程_语义化小白基础

    表现与数据分离什么是表现与数据分离?一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数据。二是前端页面展现与数据处理分离,也就是在前端处理数据的过程中,处理DOM的代码与处理数据的代码要区分开,不能混在一起,这样改起来不会牵连太多。表现与数据分离有什么好处?一些小的功能或者项目其实用不用倒无所谓,但是如果一个项目很大,代

    2020/03/30
  • 爱资料在线工具菜鸟指南_好用的在线工具箱

    爱资料在线工具菜鸟指南 官方网址:https://www.toolnb.com/ 简介描述:好用的在线工具箱 爱资料在线工具为开发运维提供全面的在线工具箱,已开发工具270款,包含…

    2020/03/11
  • js操作DOM事件中event的target和currentTarget的区别使用攻略_js事件基础指南

    事件指的是文档或者浏览器窗口中发生的一些特定交互瞬间,通过侦听器(或者处理程序)来预定事件,以便事件发生的时候执行相应的代码的过程。在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。其中event下的currentTarget与target是我们比较常用的属性,两个属性看上去挺相似的,两个属性的解释是:targe

    2020/04/06
  • Vue.js中的computed工作原理入门知识深入理解 Vue的Computed计算属性_Vue入门基础

    JS属性:JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个:var person = {};
    Object.defineProperty (person, ‘age’, {get: function () {console.log (“Getting the age”);re

    2020/04/03
  • ZenCart菜鸟指南开源、免费的商城系统,用于建立专业的网上商店

    ZenCart使用指南 官方网址:http://www.zen-cart.cn/ 简介描述:开源、免费的商城系统,用于建立专业的网上商店 Zen Cart是开源、免费的商城系统,用…

    2020/03/06
  • 彻底弄懂HTTP缓存机制及原理入门教程_原理指南攻略

    前言Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的,却并不是很清楚。在此,我会尝试用简单明了的文字,像大家系统的介绍HTTP

    2020/03/26
  • lowdb新手入门_小型本地静态JSON文件的数据库

    lowdb新手入门 GitHub:https://github.com/typicode/lowdb 简介描述:小型本地静态JSON文件的数据库 lowdb 是一个基于 Lodas…

    2020/03/06
  • 技术开发,如何与领导谈涨薪基础知识_技术使用教程

    最近在得到上看到一篇由古典老师分享的关于“如何与领导谈涨薪”的文章,对里面所表达的内容感觉特别受用,特将此分享于大家,如果有涨薪需求的,希望可以帮到大家。文中主要讲了两个知识点:涨薪的思维逻辑员工角度在过去的一年时间内,通过自己不断的努力学习与工作,能力变强了,技术水平也变高了,而且对业务领域知识也达到一个新的层次。希望公司通过加薪来匹配个人的价值。企业角度

    2020/04/05
  • 前后端分离,接口对接问题菜鸟教程网_接口菜鸟指南

    关于前后端对接问题下面好程序员web前端学习路线为大家解答。一、没有接口文档:对于前后端分离开发,必须要写接口文档。否则,第一:前后端开发没有标准,没有依据。第二:容易扯皮,没法追踪,职责不清。第三:开发效率低。等等。对于你们项目中没有写接口文档的事情,可以找项目组长进行沟通,讲明利害,由项目组长协调让写接口文档。否则,公司永远不能规范起来。显得很业余。前端

    2020/03/26
  • 可用的CSS文字两端对齐小白入门_对齐基础知识教程

    最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧:text-align:justify;
    text-justify:inter-ideograph;但问题是,我怎么就看不到效果呢?无论是英文还是中文,在IE和chrome下都不起作用。后来,终于在StackOverflow上找到解决

    2020/03/22
  • Js二维码插件:qrious指南攻略_插件小白教程

    什么是二维码二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型。二维条码/二维码(2-dimensional bar code)是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的;在代码编制

    2020/03/26
  • JS算法题之四数之和菜鸟教程下载_算法题小白帮助

    题目描述给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找出所有满足条件且不重复的四元组。注意:答案中不可以包含重复的四元组。示例给定数组 nums = [1, 0, -1, 0, -2, 2],和 target =

    2020/03/29
  • 小书匠基础入门_基于Markdown写作编辑器

    小书匠基础入门 官方网址:http://www.xiaoshujiang.com/ 简介描述:基于Markdown写作编辑器 《小书匠》是一款功能丰富且简单易用的支持Markdow…

    2020/03/11
  • 对比 Redis 的字符串和散列菜鸟攻略_字符串入门教程

    本章从开头到现在, 陆续介绍了 HSET 、 HSETNX 、 HGET 、 HINCRBY 和 HINCRBYFLOAT 等多个散列命令, 如果读者对上一章介绍过的字符串命令还有印象的话, 那么应该会记得, 字符串也有类似的 SET 、 SETNX 、 GET 、 INCRBY 和 INCRBYFLOAT 命令。 这种相似并不是巧合, 正如表 3-1 所示

    2020/03/29