使用bundle-loader异步加载react-router

BicycleWarrior 发布于2019-08-20 14:40 / 804人阅读

摘要：方案二优势不用过多的文件层级，保持文件的。不用自己定义安装中加载这里使用的是这里的是我定义的变量这里很关键多带带拿出来解释配置详解是我写的正则用来匹配我需要异步加载的文件，并且使用中的。

主要技术栈

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

安装bundle-loader

</>复制代码 
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[需要异步加载的路径])

route配置

// 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) // 可以解析

云服务器 GPU云服务器异步动态加载异步加载图片异步脚本加载 easyui异步加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81825.html

React-router 4 按需加载的实现方式及原理(Code Splitting)

摘要：的按需加载方式中实现按需加载只需要按照下面代码的方式实现就可以了。配置按需加载方式创建文件这个文件其实是个通过包装后的组件来使用，下面会具体讲这个东西。 React-router 4 介绍了在router4以后，如何去实现按需加载Component，在router4以前，我们是使用getComponent的的方式来实现按需加载的，router4中，getComponent方法已经被移除...

fuchenxuan 2019-08-21 15:50 评论0 收藏0
React组件懒加载

摘要：怎样知道何时需要请求这个组件呢社区建议的是先加载一个容器组件这个容器组件本身非常小，当这个容器组件被渲染到时则可认为我们需要请求对应的懒加载组件了。 React组件懒加载 Web应用一个重要的优势就在于可以只加载我们想要的功能，而不必每次打开都把整个系统载入那么，在React里我们怎样实现当用到我们需求的功能时再请求对应的组件，而不是一次性的请求全部代码呢？ bundle-loade...

mgckid 2019-08-21 11:54 评论0 收藏0
从前端开发者看待用友建筑云移动端单点登录与报错原因

摘要：本文对单点登录有一个初步介绍，重点叙述前端开发者使用单点登录可能遇到的问题，以及问题分析方案全部来源于用友建筑云，本文仅用于内部分享，所以不过多介绍方案实现。本文对单点登录有一个初步介绍，重点叙述前端开发者使用单点登录可能遇到的问题，以及问题分析！方案全部来源于用友建筑云，本文仅用于内部分享，所以不过多介绍方案实现。原文来自博客单点登录介绍 showImg(https://seg...

Youngdze 2019-08-22 15:35 评论0 收藏0
react搭建后台管理（react初窥）

摘要：前言以前一直是用进行的开发于是决定年后弄一弄所以年后这段时间也就一直瞎弄可算是看到成果了本来是想写一个类似仿今日头条那样的项目来入手后来又寻思还不如写个后台管理呢。于是乎自己便着手简单的搭建了一个集中设置的版本。前言以前一直是用vue进行的开发, 于是决定年后弄一弄react, 所以年后这段时间也就一直瞎弄react, 可算是看到成果了本来是想写一个类似 Vue仿今日头条那样...

wangjuntytl 2019-08-22 15:23 评论0 收藏0
react-router 升级小记

摘要：前言最近将公司项目的从版本升到了版本，跟完全不兼容，是一次彻底的重写。升级过程中踩了不少的坑，也有一些值得分享的点。没有就会匹配所有路由最后不得不说升级很困难，坑也很多。前言最近将公司项目的 react-router 从 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次彻底的重写。这也给升级造成了极大的困难，与其说升级不如说是对 route...

isLishude 2019-08-21 18:30 评论0 收藏0