webpack实战入门进阶调优分享

亚瑟王 亚瑟王 2022-04-26 1023 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
推荐阅读

FlashFXP绿色版网盘下载,附激活教程 635

FlashFxp百度网盘下载链接:https://pan.baidu.com/s/1MBQ5gkZY1TCFY8A7fnZCfQ。FlashFxp是功能强大的FTP工具

Adobe Fireworks CS6 Ansifa绿色精简版网盘下载 470

firework可以制作精美或是可以闪瞎眼的gif,这在广告领域是需要常用的,还有firework制作下logo,一些原创的图片还是很便捷的,而且fireworks用法简单,配合dw在做网站这一块往往会发挥出很强大的效果。百度网盘下载链接:https://pan.baidu.com/s/1fzIZszfy8VX6VzQBM_bdZQ

navicat for mysql中文绿色版网盘下载 443

Navicat for Mysql是用于Mysql数据库管理的一款图形化管理软件,非常的便捷和好用,可以方便的增删改查数据库、数据表、字段、支持mysql命令,视图等等。百度网盘下载链接:https://pan.baidu.com/s/1T_tlgxzdQLtDr9TzptoWQw 提取码:y2yq

火车头采集器(旗舰版)绿色版网盘下载 651

火车头采集器是站长常用的工具,相比于八爪鱼,简洁好用,易于配置。火车头能够轻松的抓取网页内容,并通过自带的工具对内容进行处理。站长圈想要做网站,火车头采集器是必不可少的。百度网盘链接:https://pan.baidu.com/s/1u8wUqS901HgOmucMBBOvEA

Photoshop(CS-2015-2023)绿色中文版软件下载 1101

安装文件清单(共46G)包含Window和Mac OS各个版本的安装包,从cs到cc,从绿色版到破解版,从安装文件激活工具,应有尽有,一次性打包。 Photoshop CC绿色精简版 Photoshop CS6 Mac版 Photoshop CC 2015 32位 Photoshop CC 2015 64位 Photoshop CC 2015 MAC版 Photoshop CC 2017 64位 Adobe Photoshop CC 2018 Adobe_Photoshop_CC_2018 Photoshop CC 2018 Win32 Photoshop CC 2018 Win64

知之

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

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