模块化 什么是模块？ 每个.js文件就是一个模块 从npm上下载的一个包（可能是由多个文件组成的一个实现特定功能的包）也是一个模块 任何文件或目录只要可以被Node.js通过require()函数加载的都是模块 每个模块就是一个独立的作用域，模块和模块之间不会互相"污染" 我们可以通过编程的方式，指定某个模块要对外暴露的内容（其实就是指定require的返回值，通过require的返回值对外暴露指定内容）。这个对外暴露内容的过程也叫"导出" module.exports 什么是包？ 通过package.j
正如当年为了统一 JavaScript 语言标准，人们制定了 ECMAScript 规范一样，如今为了统一 JavaScript 在浏览器之外的实现，CommonJS 诞生了。CommonJS 试图定义一套普通应用程序使用的 API，从而填补 JavaScript 标准库过于简单的不足。CommonJS 的终极目标是制定一个像 C++ 标准库一样的规范，使得基于 CommonJS API 的应用程序可以在不同的环境下运行，就像用 C++ 编写的应用程序可以使用不同的编译器和运行时函数库一样。为了保持中立，CommonJS 不参与标准库实现，其实现交给像 Node.js 之类的项目来完成。
模块在第一次加载后会被缓存，这也意味着多次调用require（）不会导致模块的代码被执行多次。
Node程序由许多个模块组成，每个模块就是一个文件。Node模块采用了CommonJS规范。
2、引入外部js文件：通过 src 引入，此时 script 标签内添加任何js代码都不起效果。
上一章介绍了模块的语法，本章介绍如何在浏览器和 Node.js 之中加载 ES6 模块，以及实际开发中经常遇到的一些问题（比如循环加载）。
本文主要是在我读《高性能Javascript》之后，想要记录下一些有用的优化方案，并且就我本身的一些经验，来大家一起分享下，
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情
今天我们来深度分析一下 Commonjs 和 Es Module，希望通过本文的学习，能够让大家彻底明白 Commonjs 和 Es Module 原理，能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。
熟悉jQuery开发的，学习vue的简单使用是没用啥问题的，但是学习vue的工程化开发方式，往往会遇到各种问题，比如：
1、module：我们源码目录中的每一个文件，在 webpack 中当作module来处理（webpack 原生不支持的文件类型，则通过 loader 来实现）。module组成了chunk。
1、module：我们源码目录中的每一个文件，在 webpack 中当作module来处理（webpack 原生不支持的文件类型，则通过 loader 来实现）。module组成了chunk。 2、chunk。webpack打包过程中的产物，在默认一般情况下（没有考虑分包等情况），x 个webpack的entry会输出 x 个bundle。 3、bundle。webpack最终输出的东西，可以直接在浏览器运行的。从图中看可以看到，在抽离 css(当然也可以是图片、字体文件之类的)的情况下，一个chunk是会输出多个bundle的，但是默认情况下一般一个chunk也只是会输出一个bundle
JavaScript 是单线程运行的，所以在在执行效率上并不是很高，随着用户体验的日益重视，前端性能对用户体验的影响备受关注，但由于性能问题相对复杂，接下来我们来了解下JavaScript如何提高性能；
看红宝书，重新梳理JavaScript的知识。这部分主要是梳理冷门的知识点(对个人来说是冷门的)
CommonJs 规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的 exports属性（即module.exports）是对外的接口，加载某个模块，其实是加载该模块的module.exports属性。
我们都知道Nodejs遵循的是CommonJS规范，当我们require('moduleA')时，模块是怎么通过名字或者路径获取到模块的呢？首先要聊一下模块引用、模块定义、模块标识三个概念。
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
虽然在前面的章节中你学会了如何使用 Webpack ，也大致知道其工作原理，可是你想过 Webpack 输出的 bundle.js 是什么样子的吗？ 为什么原来一个个的模块文件被合并成了一个单独的文件？为什么 bundle.js 能直接运行在浏览器中？ 本节将解释清楚以上问题。
"循环加载"（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。 // a.js var b = require('b'); // b.js var
“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。
提到 exports 和 module.exports 我们不得不提到 require 关键字。大家哦读知道 Node.js 遵循 CommonJS 规范，使用 require 关键字来加载模块。
无论是前端开始后端，总会有很多概念。就拿这个前端模块加载机制来说，随着语言的发展，各种概念。
本来想一气呵成，把加载的过程都写了，但是卡着呢，所以只好在分成两份了。 1、页面里使用<script>来加载 boot.js 。 2、然后在boot.js里面动态加载 bootLoad.js。以时间作为标识 var dateVer = date.getYear() + '_' + date.getMonth() + '_' + date.getDate() + '_' + date.getHours(); 这样可以保证一小时内肯定会被更新。同时也避免了每次都去更新。 3、boot.js里面根
我相信大家首先想到的思路就是在useEffect中通过getBoundingClientRect()获得对应传入元素(id)的位置，然后通过定位增加一个类似的弹窗效果。
———————————————— 此处代码参考原文链接：https://blog.csdn.net/qq_41998083/article/details/109726402
以下配置是在webpack 4.41.6+测试 可用于生产环境： babel-loader缓存优化 ignoreplugin noparse happyPack ParallelUglifyPlugin 不可用于生产环境的： 自动刷新 热更新 DllPlugin babel-loader的缓存优化 module: { rules: [ { test: /\.js$/, loader: 'babel-
原文标题《前后端分离和模块化-58到家微信首页重构之路》【深度前端干货】 微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题： 1、每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼； 2、开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必须走代码上线流程； 3、原有的前端切图、后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐； 4、原有配置后台操作复杂，且可配置细节不完
微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题： 每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼； 开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必须走代码上线流程； 原有的前端切图、后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐； 原有配置后台操作复杂，且可配置细节不完善； 首页加载速度太慢，用户体验欠佳。 58到家目前两年左右的发展期，整个技术生态还不完善。
viewer.html页面不需要修改。如果需要，则修改viewer.js和pdf.js等引用文件位置
A 引入 a.js，B 引入 b.js，这些代码最后都是存在于全局作用域里，难保不会出现变量命名冲突的问题。
所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。看看你有没有这JavaScript
前端的发展日新月异，前端工程的复杂度也不可同日而语。原始的开发方式，随着项目复杂度提高，代码量越来越多，所需加载的文件也越来越多，这个时候就需要考虑如下几个问题:
谷歌广告（Google Adsense）是许多站长网站的收入来源之一，但有时我们会发现谷歌广告加载很慢，影响网站的整体加载速度。本文将介绍如何优化谷歌广告加载速度，让您的网站加载更快。理论上适用于包括 Google Analytics（谷歌分析）、Google Tag Manager 和 Google AdSense 等的所有广告和统计代码。
随着互联网的发展，前端开发也变的越来越复杂，从一开始的表单验证到现在动不动上千上万行代码的项目开发，团队协作就是我们不可避免的工作方式，为了更好地管理功能逻辑，模块化的概念也就渐渐产生了。
其实对前端模块化开发的接触时间并不多，很多见解都是别人的，或者是偏的， 还是乐意记录下来，谁让我一天一个念头 说到前端模块化开发，其实是说 javascript 模块化开发。 目前，大众讲到的 javascript模块化规范 有3种，CommonJS、AMD（异步模块定义）、CMD（通用模块定义）
AMD（常用在浏览器端，异步的，如requirejs）（Asynchronous Module Definition）
导语 随着移动设备性能不断增强，web 页面的性能体验逐渐变得可以接受，又因为 web 开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP 客户端里出现越来越多内嵌 web 页面（为了配上当前流行的说法，以下把所有网页都称为 H5 页面，虽然可能跟 H5 没关系），很多 APP 把一些功能模块改成用 H5 实现。 虽然说 H5 页面性能变好了，但如果没针对性地做一些优化，体验还是很糟糕的，主要两部分体验： 页面启动白屏时间：打开一个 H5 页面需要做一系列处理，会有一段白屏时间，体验糟糕。 响
在上一次搭建后台服务的基础上，本次主要是引入了一套前端框架，当然在进行界面与接口调试的过程中，发现jpa的使用还是有一些不是很明了的地方，有些地方已经解决，而有些地方目前没有精力去处理，但是不会影响我们的正常使用。
H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优化” 项目，针对页面加载速度，渲染速度做了专项优化，下面是对本次优化的总结，包括以下几部分内容：
企鹅辅导 H5 页面在长期迭代过程中，逐渐累积了一些性能问题，导致页面加载、渲染速度变慢。为了提升用户体验，近期针对页面加载速度，渲染速度做了专项优化，本文是对此次优化的实践总结。分析过程比较细致，希望能给性能分析经验欠缺的同学一些帮助。 项目背景 H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优
简介及资料 通过Node.js的官方API可以看到Node.js本身提供了很多核心模块 http://nodejs.org/api/ ，这些核心模块被编译成二进制文件，可以require('模块名')去获取；核心模块具有最高的加载优先级（有模块与核心模块同名时会体现） （本次主要说自定义模块） Node.js还有一类模块为文件模块，可以是JavaScript代码文件（.js作为文件后缀）、也可以是JSON格式文本文件（.json作为文件后缀）、还可以是编辑过的C/C++文件（.node作为文件后缀）；
作为前端开发者，不可避免每天都要跟 Node.js 打交道。Node 遵循 Commonjs 规范，规范的核心是通过 require 来加载依赖的其他模块。我们已经常习惯于使用社区提供的各种库，但对于模块引用的背后原理知之甚少。这篇文章通过源码阅读，浅析在 commonjs 规范中 require 背后的工作原理。
学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
上一篇《前端科普系列（2）：Node.js 换个角度看世界》，我们聊了 Node.js 相关的东西，Node.js 能在诞生后火到如此一塌糊涂，离不开它成熟的模块化实现，Node.js 的模块化是在 CommonJS 规范的基础上实现的。那 CommonJS 又是什么呢？
我们平时在开发部署 Node.js 应用的过程中，对于应用进程启动的耗时很少有人会关注，大多数的应用 5 分钟左右就可以启动完成，这个过程中会涉及到和集团很多系统的交互，这个耗时看起来也没有什么问题。
链接|https://mp.weixin.qq.com/s/tbK63erZgMy5-RbhbAWgrw
赵辛贵，携程无线开发高级技术经理，目前主要负责React Native框架在携程内部的使用推广和性能优化 React Native(下文简称RN)开源已经一年多时间，国内各大互联网公司都在使用，携程
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
