react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...
react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFilename。const chooseProducts = (location, cb) => { require.ensure([], require => { cb(null, require('../Component/chooseProducts').default) },'chooseProducts') } const helpCenter = (location, cb) => { require.ensure([], require => { cb(null, require('../Component/helpCenter').default) },'helpCenter') } const saleRecord = (location, cb) => { require.ensure([], require => { cb(null, require('../Component/saleRecord').default) },'saleRecord') } const RouteConfig = ( <Router history={history}> <Route path="/" component={Roots}> <IndexRoute component={index} />//首页 <Route path="index" component={index} /> <Route path="helpCenter" getComponent={helpCenter} />//帮助中心 <Route path="saleRecord" getComponent={saleRecord} />//销售记录 <Redirect from='*' to='/' /> </Route> </Router> ); 旧写法
<Route path="movieSearch/:keyWord"
getComponent={
(nextState, callback)=> {
require.ensure([], (require)=> {
callback(null, require("../containers/MovieSearchContainer.js").default)
}, "movieSearch")
}
}
/>
require-ensure
- 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。
- 语法:
require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
- dependencies: 依赖的模块数组
- callback: 回调函数,该函数调用时会传一个require参数
- chunkName: 模块名,用于构建时生成文件时命名使用
- 注意点:requi.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。
output: {
path: path.resolve(__dirname, 'dist'),
// filename应该比较好理解,就是对应于entry里面生成出来的文件名
filename: 'bundle.js',
// 为了做代码的异步加载,所有文件都以/代替根目录转换,即输入/就会自动转为根目录
// “publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值,解决Link标签里的to用绝对路径问题
publicPath:'/',
// chunkname我的理解是未被列在entry中,却又需要被打包出来的文件命名配置。
// 在按需加载(异步)模块的时候,CommonJS的方式异步加载模块:require.ensure() API,
//异步加载的模块是要以文件形式加载哦,所以这时生成的文件名是以chunkname配置的,生成出的文件名,同时解决缓存问题
chunkFilename: '[name]_[chunkhash:8]_chunk.js'
}
react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...相关推荐
- react --- 按需加载组件
问题描述 使用 antd库时 使用按钮,须导入如下 import Button from 'antd/lib/button' import 'antd/dist/antd.css' 这样会导入全局的样 ...
- React-router 4 按需加载的实现方式及原理(Code Splitting)
React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,ge ...
- ant-design如果按需加载组件
Ant Design React按需加载 Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm in ...
- Vue根据菜单json数据动态按需加载路由Vue-router
每个菜单项对应一个页面组件,根据菜单项动态按需加载路由 路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...
- react 动态路 嵌套动子路由_react 路由动态加载组件,实现按需加载
默认情况下,当在项目根路径下执行npm run build时,create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件. 当项目代码量不多 ...
- React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...
- react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况: 第一种手写的,不使用脚手架: 1.安装: npm install ant --save 2.引用: import { Alert, F ...
- react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
- 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)
一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
最新文章
- “TNS-03505:无法解析名称”问题解决一例
- Spring Boot结合spring-data-jpa
- javascript --- 对象原型
- 2021牛客暑期多校训练营4 E - Tree Xor 线段树 + 拆分区间
- 怎么将sql语句转化成语法树_数据库如何解析执行SQL
- Stanford机器学习---第五讲. 神经网络的学习 Neural Networks learning
- 高危bash漏洞来袭,小心你的服务器!
- oracle alert.log查找,oracle alert.log位置
- java --map遍历
- js控制ctrl+p
- 面向创意设计人员的CATIA
- 任正非发声:把活下来作为最主要纲领;安卓山寨 iOS 启动器下载超 5000 万次;公司停电,程序员去网吧写代码 | EA周报...
- 利用Racher轻松构建PASS平台
- Java中resualtset,@Result type = 'stream
- 世界十大高楼中国占6座 中东要建第一楼
- 微信小程序java python node医疗微服务系统医院预约挂号系统
- ssh外网访问内网服务器
- LeetCode - 1002 - 查找常用字符(find-common-characters)
- ICPC 2018 南京站游记
- 如何复制360图书馆文章
热门文章
- (U3D)Time的使用
- Ueditor和CKeditor 两款编辑器的使用与配置
- JavaScript去除字符串首尾空格
- 使用Combox控件的一个问题
- C++11中头文件type_traits介绍
- 吴恩达老师深度学习视频课笔记:卷积神经网络
- 图像配准----RANSAC
- java 读取数据库结构_JAVA从SQLITE数据库中读取省份地市构造一棵树
- ensp大型网络环境设计与实现_mongodb内核源码设计实现、性能优化、最佳运维系列-网络传输层模块源码实现三...
- linux命令安装组件,Linux安装各种组件