模块化 什么是模块？ 每个.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天，点击查看活动详情
熟悉jQuery开发的，学习vue的简单使用是没用啥问题的，但是学习vue的工程化开发方式，往往会遇到各种问题，比如：
今天我们来深度分析一下 Commonjs 和 Es Module，希望通过本文的学习，能够让大家彻底明白 Commonjs 和 Es Module 原理，能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。
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')时，模块是怎么通过名字或者路径获取到模块的呢？首先要聊一下模块引用、模块定义、模块标识三个概念。
"循环加载"（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。 // a.js var b = require('b'); // b.js var
“循环加载”（circular dependency）指的是，a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本。
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。
提到 exports 和 module.exports 我们不得不提到 require 关键字。大家哦读知道 Node.js 遵循 CommonJS 规范，使用 require 关键字来加载模块。
虽然在前面的章节中你学会了如何使用 Webpack ，也大致知道其工作原理，可是你想过 Webpack 输出的 bundle.js 是什么样子的吗？ 为什么原来一个个的模块文件被合并成了一个单独的文件？为什么 bundle.js 能直接运行在浏览器中？ 本节将解释清楚以上问题。
无论是前端开始后端，总会有很多概念。就拿这个前端模块加载机制来说，随着语言的发展，各种概念。
本来想一气呵成，把加载的过程都写了，但是卡着呢，所以只好在分成两份了。 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)的位置，然后通过定位增加一个类似的弹窗效果。
以下配置是在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、原有配置后台操作复杂，且可配置细节不完
———————————————— 此处代码参考原文链接：https://blog.csdn.net/qq_41998083/article/details/109726402
微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题： 每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼； 开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必须走代码上线流程； 原有的前端切图、后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐； 原有配置后台操作复杂，且可配置细节不完善； 首页加载速度太慢，用户体验欠佳。 58到家目前两年左右的发展期，整个技术生态还不完善。
viewer.html页面不需要修改。如果需要，则修改viewer.js和pdf.js等引用文件位置
所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。看看你有没有这JavaScript
A 引入 a.js，B 引入 b.js，这些代码最后都是存在于全局作用域里，难保不会出现变量命名冲突的问题。
前端的发展日新月异，前端工程的复杂度也不可同日而语。原始的开发方式，随着项目复杂度提高，代码量越来越多，所需加载的文件也越来越多，这个时候就需要考虑如下几个问题:
谷歌广告（Google Adsense）是许多站长网站的收入来源之一，但有时我们会发现谷歌广告加载很慢，影响网站的整体加载速度。本文将介绍如何优化谷歌广告加载速度，让您的网站加载更快。理论上适用于包括 Google Analytics（谷歌分析）、Google Tag Manager 和 Google AdSense 等的所有广告和统计代码。
随着互联网的发展，前端开发也变的越来越复杂，从一开始的表单验证到现在动不动上千上万行代码的项目开发，团队协作就是我们不可避免的工作方式，为了更好地管理功能逻辑，模块化的概念也就渐渐产生了。
AMD（常用在浏览器端，异步的，如requirejs）（Asynchronous Module Definition）
其实对前端模块化开发的接触时间并不多，很多见解都是别人的，或者是偏的， 还是乐意记录下来，谁让我一天一个念头 说到前端模块化开发，其实是说 javascript 模块化开发。 目前，大众讲到的 javascript模块化规范 有3种，CommonJS、AMD（异步模块定义）、CMD（通用模块定义）
在上一次搭建后台服务的基础上，本次主要是引入了一套前端框架，当然在进行界面与接口调试的过程中，发现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作为文件后缀）；
导语 随着移动设备性能不断增强，web 页面的性能体验逐渐变得可以接受，又因为 web 开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP 客户端里出现越来越多内嵌 web 页面（为了配上当前流行的说法，以下把所有网页都称为 H5 页面，虽然可能跟 H5 没关系），很多 APP 把一些功能模块改成用 H5 实现。 虽然说 H5 页面性能变好了，但如果没针对性地做一些优化，体验还是很糟糕的，主要两部分体验： 页面启动白屏时间：打开一个 H5 页面需要做一系列处理，会有一段白屏时间，体验糟糕。 响
作为前端开发者，不可避免每天都要跟 Node.js 打交道。Node 遵循 Commonjs 规范，规范的核心是通过 require 来加载依赖的其他模块。我们已经常习惯于使用社区提供的各种库，但对于模块引用的背后原理知之甚少。这篇文章通过源码阅读，浅析在 commonjs 规范中 require 背后的工作原理。
学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
我们平时在开发部署 Node.js 应用的过程中，对于应用进程启动的耗时很少有人会关注，大多数的应用 5 分钟左右就可以启动完成，这个过程中会涉及到和集团很多系统的交互，这个耗时看起来也没有什么问题。
链接|https://mp.weixin.qq.com/s/tbK63erZgMy5-RbhbAWgrw
上一篇《前端科普系列（2）：Node.js 换个角度看世界》，我们聊了 Node.js 相关的东西，Node.js 能在诞生后火到如此一塌糊涂，离不开它成熟的模块化实现，Node.js 的模块化是在 CommonJS 规范的基础上实现的。那 CommonJS 又是什么呢？
赵辛贵，携程无线开发高级技术经理，目前主要负责React Native框架在携程内部的使用推广和性能优化 React Native(下文简称RN)开源已经一年多时间，国内各大互联网公司都在使用，携程
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
