webpack实战入门进阶调优分享

亚瑟王 亚瑟王 2022-04-26 562 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 例子都能应用到其他的页面和模板中。

知之

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

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