文档章节

前端模块打包器的开发实践1:需求分析

 雕刻零碎
发布于 2017/04/24 19:39
字数 562
阅读 362
收藏 6
点赞 0
评论 0

前端模块化现状

分类:以Webpack,browserify的静态分析 VS RequireJS amd模块

(es6 的模块我认为还是一种语法糖而已,在前端浏览器的支持还长时间地需要转换器的转换)

静态分析以使用CommonJS方式组织代码,指定入口文件,默认将所依赖的代码合并到同一个文件中去,文件发送请求少。而且有一个最重要的好处就是Webpack自带的Code Splitting 代码分割可以允许开发者将不同的代码组织在一起,符合前端组件化的需求。

amd模块的模块编写方式是遵守amd规范的,然后通过loader(加载器)将模块按需加载。模块是分散的。

(这里讨论问题时候只着眼于重点

不足就是相互的优点:

静态分析的Webpack , 在按需加载的实现颇为麻烦,甚至有一点不可行

amd模块的编写,文件请求次数多,只有单次依赖的模块需要发起单独请求。文件组织形式(由于amd模块没有考虑Css模块,Html模块的加载,在如今前端组件化组织的前景下逐渐没意义了)唯一是Js.

需求分析

  1. 代码分割,优点就是能够将Html Css Js 组织在同一个文件之中。

  2. 代码局部作用域

    (上述都是组件化的需要)

  3. 模块及依赖打包(模块粒度的控制)

    模块的层级:

    • 全局

    • 局部

    • 私有

全局一般是外部库, 自己写的公有库;局部是在某几个组件都使用的库 ;私有:只是用一次的库

最近很多人都在使用SPA的开发方式,但是,SPA+Router不就是MPA吗?

  1. 由于将模块层次分割出来,这就有了中间层(局部)模块的按需加载需求了

  2. 正因为按需加载,所以有必要使用规范的模块格式

  3. 模块及依赖的识别,以及生成模块树

综上所述,我们形象地说希望构建Webpack+RequireJS的一个工具

© 著作权归作者所有

共有 人打赏支持
粉丝 5
博文 18
码字总数 46486
作品 0
江门
程序员
前端又双叒叕一个打包工具——parceljs

前端你懂的, 隔断时间不造个轮子会死人。 为了解决什么问题 同样的parcel官网首页的一句话基本就说清楚了为什么要用它 Blazing fast, zero configuration web application bundler 快速和零...

Kurset ⋅ 2017/12/12 ⋅ 0

SpringMVC异常统一处理(异常信息的国际化,日志记录)

JAVA EE项目中,不管是对底层的数据操作,还是业务层的处理过程,还是控制层的处理,都不可避免的会遇到各种可预知的(业务异常主动抛出)、不可预知的异常需要处理。一般dao层、service层的异常都...

留给明天 ⋅ 2016/11/17 ⋅ 0

Javascript资源管理--JRaiser

JRaiser是一个通过加载器进行Javascript资源管理、功能模块化的前端Javascript类库。 JRaiser加载器基于CMD规范,提供了良好的模块封装、调用机制,在利于功能分解的同时,也让您在复杂的模块...

第三方支付接口 ⋅ 2015/03/22 ⋅ 0

下一代前端打包工具与tree-shaking

一、js模块化打包概述   随着js模块化规范AMD、CMD、commonJs的出现,模块打包工具也在不断的出现和演变,依次出现了r.js、browserify和webpack,过去的2015年就是webpack大行其道的一年,...

ouven ⋅ 2016/01/20 ⋅ 5

【前端技术】头条PC站基于RIOT的组件化开发实践

一、背景 1、头条PC站业务前端重构 2、为什么选择Riot? Riotjs是一种小而美的js框架,2.2.4稳定版本兼容IE8。采用该框架在头条pc站进行了组件化开发方式的实践,有效地提高了开发效率和扩展...

今日头条技术团队 ⋅ 05/24 ⋅ 0

掘金技术整理(一)掘金的后端架构

掘金从上线到现在,网站的前端重构了 3 次,后端也陆陆续续修改了整个网站的结构 2 次,但是随着业务不断推演复杂,团队人手增加,有需要一波进一步的优化! 这周,我们会根据当下掘金的情况...

阴明 ⋅ 2016/06/27 ⋅ 0

[持续更新] VueConf 大会现场笔记

活动很赞,人很多,氛围非常好! 一、Vue 2017 现状与发展 By 尤雨溪 Evan You @ Vue 起源 2013 年 6 月:First Commit (Seed) 2013 年 12 月:第一次将项目名字 Vue 2014 年 2 月:第一次公...

阴明 ⋅ 2017/05/20 ⋅ 0

移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

腾讯云加社区 ⋅ 06/11 ⋅ 0

Webpack脚手架

1. 什么是webpack? webpack是一个现代Javascript应用程序的模块打包器,当webpack处理应用程序时,他会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包...

R_JsBest ⋅ 2017/12/04 ⋅ 0

将人工智能应用云开发中,“码农1号”要掀起IT界的一股浪潮

随着人工智能的高速发展,随处可见识AI技术在生活中的实践。手机中的siri,家庭中的智能音箱,在医疗诊断上进行智能病例处理,以计算机视觉为核心的城市智能安防系统,以及最近热议的无人驾驶...

wx5ad006e30faa9 ⋅ 04/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CENTOS7防火墙命令记录

安装Firewall命令: yum install firewalld firewalld-config Firewall开启常见端口命令: firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-po......

cavion ⋅ 20分钟前 ⋅ 0

【C++】【STL】利用chromo来测量程序运行时间与日志时间打印精确到微秒

直接上代码吧,没啥好说的。头疼。 #include <iostream>#include <string>#include <ctime>#include <sstream>#include <iomanip>#include <thread>#include <chrono>using ......

muqiusangyang ⋅ 23分钟前 ⋅ 0

Mac环境下svn的使用

在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境。在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还需做一下简...

故久呵呵 ⋅ 33分钟前 ⋅ 0

破解公司回应苹果“USB限制模式”:已攻破

本周四,苹果发表声明称 iOS 中加入了一项名为“USB 限制模式”的功能,可以防止 iPhone 在连接其他设备的时候被破解,并且强调这一功能并不是针对 FBI 等执法部门,为的是保护用户数据安全。...

六库科技 ⋅ 34分钟前 ⋅ 0

MyBtais整合Spring Boot整合,TypeHandler对枚举类(enum)处理

概要 问题描述 我想用枚举类来表示用户当前状态,枚举类由 code 和 msg 组成,但我只想把 code 保存到数据库,查询处理,能知道用户当前状态,这应该怎么做呢?在 Spring 整合MyBatis 的时候...

Wenyi_Feng ⋅ 53分钟前 ⋅ 0

synchronized与Lock的区别

# <center>王梦龙的读书笔记第一篇</center> ## <center>-synchronized与Lock的区别</centre> ###一、从使用场景来说 + synchronized 是能够注释代码块、类、方法但是它的加锁是和解锁使用一......

我不想加班 ⋅ 今天 ⋅ 0

VConsole的使用

手机端控制台打印输出,方便bug的排查。 首先需要引入vconsole.min.js 文件,然后在文件中创造实例。就能直接使用了。 var vConsole = new VConsole(); vConsole的文件地址...

大美琴 ⋅ 今天 ⋅ 0

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 今天 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 今天 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部