异步html的效果,异步加载非核心CSS_html/css_WEB-ITnose
在生产环境中如果依靠前端引用JSXTransformer.js文件来实现JSX向JavaScript的转换,那是绝对不靠谱的。所以,使用Reactjs的童鞋就需要使用更有逼格的方式来完成这项任务。作为现在最常用的前端构建工具gulp搭配上Browserify来搞定这个问题那真是拉风的不要不要的 :)
废话不多说,咱们来点直接的吧。
源代码
我们这次的任务就是让这段满目疮痍的源代码变得更优化,千里之行,这是开始。如果有童鞋看不懂这段代码是用来做神马的,那么我只能说,“妈妈叫你回家看基础了。” 回家之路 (看不懂代码的,请猛戳)。
优化
前面把两个组件都写到一块了,现在来分割成独立的文件。其中一个命名为js/components/Parent.jsx,内容如下: var Child = require('./Child.jsx');var Parent = React.createClass({ render: function(){ return (
Hello World ) }});module.exports = Parent;
Parent 的子元器件Child写到js/components/Child.jsx中,内容如下: var Child = React.createClass({ render: function(){ return (
The Child ) }});module.exports = Child;
写到这里,我们已经将两个组件做了初步的拆分,如果有童鞋对module.exports是神马还是一知半解或者根本不懂这是要搞什么飞机,那么请去百度自行谷歌CMD规范,相信度娘会很妩媚的帮你解惑。
如果要真正让元器件显示在页面上需要执行React.render函数,这个是写在js/app.js中的,内容如下: var Parent = require('./components/Parent.jsx');React.render(, document.getElementById('app'));
做到这里,我们还顺带了做了一件很有意义的事情,就是对文件文件目录做了优化,组件放置在/components文件夹中,启动放置在根目录/js下,清晰明了。
使用Browerify之后,html文件中只需要引入一个自定义script文件就好了 ,如下:
所有依赖的js内容未来都会被编译到bundle.js文件中。
安装 Browserify
首先要安装 Gulp 。这里我假设大家的系统上都安装好了 nodejs 并且也全局安装了 gulp ,也就是敲gulp -v
是可以看到输出的。
首先确认你的电脑已经成功安装了gulp,至于怎么安装,这我就不多说了。去谷歌百度一下会是一个好办法。
如果你在命令行敲击如下命令 gulp -v
输出结果大概如下面这个这样子的话,那就说明你已经成功安装了gulp。 CLI version 3.9.0Local version 3.9.0
在这个基础上,进入项目目录还需要来局部安装 gulp ,browserify 以及相关的辅助工具: npm install --save-dev gulp browserify vinyl-source-stream babelify
使用Mac的童鞋不要忘记加sudo哟。
说一下上面四个包的各自作用: gulp 是任务运行环境,用来进行任务调度
browserify 用来 require js 的模块
vinyl-source-stream 把 browserify 输出的数据进行准换,使之流符合 gulp 的标准
reactify 使用它来实现 JSX 编译功能
然后到 gulpfile.js 中,填写如下内容: var gulp = require("gulp"),browserify = require('browserify'),reactify = require('reactify'),source = require('vinyl-source-stream');gulp.task('jsx', function() {browserify('./js/app.js').transform(reactify).bundle().pipe(source('bundle.js')).pipe(gulp.dest('js'));});
来解释一下上面的脚本流程。首先就是把入口文件 app.js 交给 browserify 进行处理,对于 jsx 的编译,官方推荐使用的就是reactify。下一步,运行 bundle()来把所有依赖都打包成 bundle.js ,但是注意,browserify 不是一个专门为 gulp 写的包,所有它输出的数据流并不能直接 pipe 给 gulp 使用,所以,需要用到 source()接口,也就是 vinyl-source-stream 这个工具来处理一下,然后 pipe 给 gulp ,gulp.dest 会把输出的 bundle.js 文件保存到 js 文件夹中。
任务写好了,在命令行执行: gulp jsx
这样就生成了 js/bundle.js 文件了。由于这个文件的标签已经添加到 index.html 中了,所以直接用 chrome 打开就可以看到运行效果了。
文章改编自 《当 React 遇见 Gulp 和 Browserify》原文 http://segmentfault.com/a/1190000004002631
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
异步html的效果,异步加载非核心CSS_html/css_WEB-ITnose相关推荐
- vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
- Cesium 实战 - 最新版(1.104.0)通过异步方式初始化地球,加载影像以及高程图层
Cesium 实战-最新版(1.104.0)通过异步方式初始化地球,加载影像以及高程图层 遇到问题 初始化底图 初始化高程(监听载入完成事件,开启关闭高程) 初始化 3dtile 在线示例 Cesiu ...
- Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载 目录 异步组件 异步组件介绍 异步组件声明 高级异步组件 路由懒加载 路由懒加载介绍 路由懒加载方法 把组件按组分块 异步组件 异步组件介绍 在开发大型 ...
- vue——懒加载(异步延迟和彻底懒加载)
vue项目优化之懒加载 引入问题 一.默认: 异步延迟加载 结果图解 二.彻底懒加载(手动配置) 步骤 1. 实现异步延迟加载的两步 2. 配置脚手架,去掉prefetch 结果图解 引入问题 单页面 ...
- ListView中的图片异步加载、缓存
一.ListView的图片异步加载 我们都知道对每一个Weibo Item都有用户头像,而且每一条微博还可能带有图片.如果在加载列表的同时加载图片,这样有几个缺点,第一很费事,界面卡住,用户体验很不好 ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- Android批量图片加载经典系列——使用LruCache、AsyncTask缓存并异步加载图片
一.问题描述 使用LruCache.AsyncTask实现批量图片的加载并达到下列技术要求 1.从缓存中读取图片,若不在缓存中,则开启异步线程(AsyncTask)加载图片,并放入缓存中 2.及时移除 ...
- 异步加载网络图片 可同时加载多张
按照惯例先上传效果图: 图片效果只是加载一张网络上的图片,实际开发中放在list_item中都可以,有两种方法实现,就不贴代码了. 传送门:源代码下载地址:android 实现图片异步加载
- AssetBundle异步加载被中断的问题
1)AssetBundle异步加载被中断的问题 2)LuaDLL.lua_pcall()自身产生开销问题 3)法线在手机渲染时出现的错误问题 4)UNITY_MATRIX_I_V 和Camera.m ...
最新文章
- 6426C Lab3 部署证书和管理注册
- 计算机组装与维护实例教程,计算机组装与维护案例教学-20210714101609.pdf-原创力文档...
- DXUT框架剖析(12)
- web前端小数点位数处理
- 2020必知的 10 大顶级 python 库
- JavaScript中Window.event详解
- 用C#在STM32上写第一个Hello world
- 读书笔记-你不知道的JS上-混入与原型
- 新项目jenkis配置
- php正则表达式图谱
- 用python画圣诞树-使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
- AOF -- Redis 设计与实现
- 独角兽影视APP系统源码/双端影视APP源码
- 魔兽世界 MPQ(MoPaQ) 文件相关资料
- 华为电脑浏览器主页被劫持
- Android摇一摇振动效果Demo
- NOIP 2015 D1 T2 信息传递
- 3D立体相册 html+css
- win10移动桌面到D盘
- 港科喜讯| 范智勇教授获2022年科学探索奖
热门文章
- 解读红帽的云计算战略 云端之争优势何在(1)
- DOL实例分析和编程一
- 【Django】用file.chunks()代替file.read()
- 私钥创建,申请证书,吊销证书,创建自签名证书
- 百度在我肩上哭泣英文_使我哭泣的代码
- 【Shell】简单的交互式脚本
- 计算机总是跳出交互式检测,交互式服务检测,教您如何解决电脑总是弹出交互式服务检测...
- 题目:字符串反转,如将字符串 “www.runoob.com“ 反转为 “moc.boonur.www“。
- 【华为OD统一考试B卷 | 200分】 连续出牌数量(C++ Java JavaScript )
- matlab做概率论题,Matlab 概率论与数理统计.doc