摘要:方案二优势不用过多的文件层级,保持文件的。不用自己定义安装中加载这里使用的是这里的是我定义的变量这里很关键多带带拿出来解释配置详解是我写的正则用来匹配我需要异步加载的文件,并且使用中的。
主要技术栈
React,
React-redux,
React-router,
Typescript,
antd,
Immutable,
...
因为项目是一个SPA页面,随着项目的不断迭代,入口文件逐渐增大(app.js),所以想减少入口文件的体积。
方案方案一:
webpack(require.ensure)+ react-router
因为使用require.ensure需要足够深的文件层级并且在对应文件需要定义index.ts文件作为require.ensure入口,书写起来比较麻烦,而且相对于工作量来说也是大有增加(具体的实现方案网上也比较多),故没有选择。
方案二:
webpack(bundle-loader)+ react-router(lazyLoadComponent)
优势:
1、不用过多的文件层级,保持文件的prue。
2、不用自己定义require.ensure
</>复制代码
npm install bundle-loader --save-dev
webpack中加载loader(这里使用的是webpack2)
</>复制代码
export default {
entry: entries,
output: {
path: __dirname,
filename: `${dist}/js/[name].js`, // 这里的dist是我定义的变量
publicPath: "https://127.0.0.1/", // 这里很关键=>多带带拿出来解释
},
resolve: {
extensions: [
".js",
".jsx",
".ts",
".tsx",
".css",
".less",
".json",
".gif",
".html",
".png",
".webp",
".jpg",
],
},
module: {
rules: [
{
test: /.jsx?$/,
loader: "babel-loader",
},
{
test: /.(tsx|ts)/,
exclude: [
path.resolve(__dirname, "src/pages/")
],
loader: "ts-loader",
},
{
test: /srcpages(.*).(tsx|ts)/,
use: [
"bundle-loader?lazy",
"ts-loader",
],
},
{
test: /.(less)?$/,
use: [
"style-loader",
"css-loader",
"less-loader",
],
// loader: "style!css!less"
},
{
test: /.css$/,
loader: extractCSS.extract({
fallbackLoader: "style-loader",
loader: "css-loader",
}),
},
{
test: /.(jpg|png|gif|jpeg)?$/,
loader: `url-loader?limit=20480&name=${dist}/images/[name].[hash:8].[ext]`,
},
{
test: /.(eot|woff(2)?|ttf|svg)?(@.+)*$/,
loader: `url-loader?limit=20480&name=${dist}/other/[name].[hash:8].[ext]`,
}
],
},
plugins: [
/**
* DllReferencePlugin
*/
new DllReferencePlugin({
context: __dirname,
manifest,
}),
/**
* CommonsChunkPlugin
*/
new CommonsChunkPlugin({
name: "common",
filename: `${dist}/common.js`,
minChunks: 2,
chunks: entriesKey
}),
],
devtool: "cheap-module-source-map",
devServer: {
port,
https,
contentBase: ROOTPATH,
compress: true,
inline: true,
quiet: false,
stats: { colors: true },
watchOptions: {
aggregateTimeout: 300,
poll: true,
},
headers: {
"Access-Control-Allow-Origin": "*",
},
}
};
配置详解
</>复制代码
{
test: /srcpages(.*).(tsx|ts)/,
use: [
"bundle-loader?lazy",
"ts-loader",
],
},
test:是我写的正则用来匹配我需要异步加载的文件,并且使用use中的bundle-loader->ts-loader。
(ps:在ts-loader编译全局文件时,需要exclude[需要异步加载的路径])
// router.tsx
</>复制代码
import * as EffectiveCustomer from "./pages/wuyoubao/customerManagement/effectiveCustomer";
function lazyLoadComponent(lazyModule) {
return (location, cb) => {
lazyModule(module => cb(null, module.default));
}
}
注意事项
因为router.tsx中引用的tsx全部是被bundle-loader编译的,而bundle-loader对ES6特性支持不是很好,比如:
ES6可以解析
</>复制代码
import { OrderInfoMessage } from "./fundConfirmCom/fundConfirmInfoOrder";
console.log(OrderInfoMessage)
// 可以解析
但是这种方式bundle-loader解析不了,它所能解析的方式:
bundle-loader解析module
</>复制代码
import { OrderInfoMessage } from "./fundConfirmCom/fundConfirmInfoOrder";
console.log(OrderInfoMessage) // undefined
// bundle-loader可以识别的方式:
import * as OrderInfoMessage from "./fundConfirmCom/fundConfirmInfoOrder";
console.log(OrderInfoMessage) // 可以解析
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81825.html
摘要:的按需加载方式中实现按需加载只需要按照下面代码的方式实现就可以了。配置按需加载方式创建文件这个文件其实是个通过包装后的组件来使用,下面会具体讲这个东西。 React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除...
摘要:怎样知道何时需要请求这个组件呢社区建议的是先加载一个容器组件这个容器组件本身非常小,当这个容器组件被渲染到时则可认为我们需要请求对应的懒加载组件了。 React组件懒加载 Web应用一个重要的优势就在于可以只加载我们想要的功能,而不必每次打开都把整个系统载入 那么,在React里我们怎样实现当用到我们需求的功能时再请求对应的组件,而不是一次性的请求全部代码呢? bundle-loade...
摘要:本文对单点登录有一个初步介绍,重点叙述前端开发者使用单点登录可能遇到的问题,以及问题分析方案全部来源于用友建筑云,本文仅用于内部分享,所以不过多介绍方案实现。 本文对单点登录有一个初步介绍,重点叙述前端开发者使用单点登录可能遇到的问题,以及问题分析!方案全部来源于用友建筑云,本文仅用于内部分享,所以不过多介绍方案实现。原文来自博客 单点登录介绍 showImg(https://seg...
摘要:前言以前一直是用进行的开发于是决定年后弄一弄所以年后这段时间也就一直瞎弄可算是看到成果了本来是想写一个类似仿今日头条那样的项目来入手后来又寻思还不如写个后台管理呢。于是乎自己便着手简单的搭建了一个集中设置的版本。 前言 以前一直是用vue进行的开发, 于是决定年后弄一弄react, 所以年后这段时间也就一直瞎弄react, 可算是看到成果了 本来是想写一个 类似 Vue仿今日头条 那样...
摘要:前言最近将公司项目的从版本升到了版本,跟完全不兼容,是一次彻底的重写。升级过程中踩了不少的坑,也有一些值得分享的点。没有就会匹配所有路由最后不得不说升级很困难,坑也很多。 前言 最近将公司项目的 react-router 从 v3 版本升到了 v4 版本,react-router v4 跟 v3 完全不兼容,是一次彻底的重写。这也给升级造成了极大的困难,与其说升级不如说是对 route...
阅读 1976·2021-09-28 09:36
阅读 2599·2021-09-08 09:35
阅读 3134·2019-08-30 15:53
阅读 1619·2019-08-30 14:08
阅读 764·2019-08-29 18:40
阅读 2937·2019-08-29 13:57
阅读 2778·2019-08-29 13:55
阅读 764·2019-08-26 13:45
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要