webpack实战入门进阶调优分享

亚瑟王 亚瑟王 2022-04-26 695 Java

什么是webpack?

Webpack是一个JavaScript模块打包工具,它能够解决模块之间的依赖,把各个模块按照特定的规则和顺序组织在一起,最终合并为一个或多个能够直接在浏览器上运行的JS文件。

webpack实战入门进阶调优分享

什么是模块?

模块

把程序比作一个城市,程序中的模块就像城市内部的职能部门一样,每个模块都有特定的功能。协同工作,才能保证程序的正常运转。如工程中引入的npm包,或者提供工具方法的JS文件,都可以称为模块。

webpack实战入门进阶调优分享

模块化解决的问题

无模块化问题

1需要手动维护JavaScript的加载顺序。页面中多个script之间依赖关系很不明确。

2每一个script标签都需要向服务器请求一次静态资源,过多的请求会严重拖慢网页的渲染速度。

3在每个script标签中,顶层作用域即全局作用域,很容易造成全局作用域的污染。

模块化解决问题

1导入和导出语句,使模块间依赖关系清晰易懂

2可以借助工具来进行打包,在页面中只需要加载合并后的资源文件,减少了资源的消耗。

3多个模块之间的作用域是隔离的,彼此不会有命名冲突。

模块标准

Common.js

每个文件是一个模块,模块会形成一个属于模块自身的作用域,所有的变量及函数只有自己能访问,对外是不可见的。

导出

module.export = {…}

模块内部会有一个module对象用于存放当前模块的信息, exports用来指定该模块要对外暴露哪些内容。

导入

const xxx = require(‘…’);

require的模块首次加载,会首先执行该模块,再导出内容。再次加载,直接导出内容。Module对象中有loaded属性记录模块是否被加载过。

ES6

每个文件是一个模块,自动采用严格模式.

导出

export default {…} 默认导出,只能有一个

export {xxx…} 命名导出

导入

import xxx(随意命名) from ‘xx’//默认导出

import {xxx} from ‘xxx’//命名导出导入时名称一致,可as重命名

区别

webpack实战入门进阶调优分享

Es6优点

1 死代码检查和排除

2 代码类型检查,模块之间传递的值或接口类型是正确的

3编译器优化,eS6 支持直接导入变量,减少了引用层级,程序效率更高。

4解决循环依赖,只是需要由开发者来保证当导入的值被使用时已经设置好正确的导出值。

Webpack优点

1.支持多种模块标准,如common.js 、es6、AMD等等。

2.Webpack有完备的代码分割(code splitting)解决方案.它可以分割打包后的资源,首屏只加载必要的部分,不太重要的功能放到后面动态地加载,可以减小资源体积,提升首页渲染速度。

3.可以处理各种类型的资源,如vue、ts、scss等。

4拥有庞大的社区支持,有无数开发者来为它编写周边插件和工具

Webpack打包后内容

webpack实战入门进阶调优分享

 

最外层立即执行匿名函数。

它用来包裹整个bundle,并构成自身的作用域。installedModules对象。每个模块只在第一次被加载的时候执行,之后其导出值就被存储到这个对象里面,当再次被加载的时候直接从这里取值,而不会重新执行.modules对象。工程中所有产生了依赖关系的模块都会以key-value的形式放在这里。key为一个模块的id,由数字或者一个很短的hash字符串构成;value则是由一个匿名函数包裹的模块实体。

浏览器运行bundle文件流程

webpack实战入门进阶调优分享

 

Webpack基础配置

基础概念:具有依赖关系的模块会在打包是封装为一个chunk,根据配置不同,一个程序会生成一个或多个chunk。

• 基础配置

【下载地址】

百度网盘链接:https://pan.baidu.com/s/1tJ4Dee6jcw6577U8DlsH-g

提取码:aimr


相关文章


使用-JFreeChart来创建基于web的图表

使用-JFreeChart来创建基于web的图表

XStream使用文档

XStream使用文档

WebService发布过程及常见问题

WebService发布过程及常见问题

webpack实战入门进阶调优分享

webpack实战入门进阶调优分享

weblogic调优参数及监控指标

weblogic调优参数及监控指标

weblogic节点管理

weblogic节点管理

weblogic管理控制台概述

weblogic管理控制台概述

weblogic-部署和启动

weblogic-部署和启动

WebLogic-Server-性能及调优-调优-Java-虚拟机

Java 虚拟机(Java virtual machine,简称 JVM)是一种虚拟“执行引擎”实例,可在微处理器上执行 Java 类文件中的字节码。调整 JVM 的方式会影响 Weblogic Server 和应用程序的性能。

Velocity用户教程

Velocity是一个基于java的模板引擎(template engine)。它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象。

Velocity用户手册

Velocity 用户手册是帮助页面设计者和内容提供者认识 Velocity 和其简单而功能强大的脚本语言――Velocity 模板语言(VTL)。在手册上的许多例子,都是用 Velocity 插入动态的内容到网页上,但是所有的 VLT 例子都能应用到其他的页面和模板中。


文章热度: 9406
文章数量: 18
推荐阅读

CAD快捷键有哪些?(常用的CAD快捷键命令大全) 64

一、常用绘图快捷键。最基本的一些画图的功能操作,简单来说就是CAD制图的打底部分。(如下图)二、常用编辑快捷键CAD中对图形进行修改的操作。

chatgpt是谁开发的? 108

OpenAI官网显示,为ChatGPT项目做出贡献的人员不足百人(共87人)。从成员毕业高校分布看,校友最多的前5大高校是斯坦福大学(14人)、加州大学伯克利分校(10人)、麻省理工学院(7人)、剑桥大学(5人)、哈佛大学(4人)和佐治亚理工学院(4人)。

怎么注册chatgpt(chatgpt怎么使用) 241

第一步 上网工具。打开上网工具,工具基本是需要付费使用的。注册然后按照教程安装,直到能够测试上网打开即可。

win10版本区别有哪些?怎么选择?哪个更好用? 69

win10系统分为7个版本。家庭版(Windows 10 Home);专业版(Windows 10 Professional);企业版(Windows 10 Enterprise);教育版(Windows 10 Education);移动版(Windows 10 Mobile);移动企业版(Windows 10 Mobile Enterprise);物联网核心版(Windows 10 loT Core)

win10自动更新怎么关闭,教你三步即可搞定 53

方法一:组策略关闭 1、同时按下“Win+R”打开运行窗口,然后输入gpedit.msc回车打开【本地组策略编辑器】。2、在组策略编辑里面,我们依次展开【计算机配置 - 管理模板 - Windows 组件 - Windows 更新】,然后在右侧找到【配置自动更新】选项选中。

知之

知之平台是全球领先的知识付费平台。提供各个领域的项目实战经验分享,提供优质的行业解决方案信息,来帮助您的工作和学习

使用指南 建议意见 用户协议 友情链接 隐私政策 Powered by NOOU ©2020 知之