成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用bundle-loader異步加載react-router

BicycleWarrior / 795人閱讀

摘要：方案二優(yōu)勢(shì)不用過(guò)多的文件層級(jí)，保持文件的。不用自己定義安裝中加載這里使用的是這里的是我定義的變量這里很關(guān)鍵多帶帶拿出來(lái)解釋配置詳解是我寫的正則用來(lái)匹配我需要異步加載的文件，并且使用中的。

主要技術(shù)棧

React,
React-redux,
React-router,
Typescript,
antd,
Immutable,
...

需求

因?yàn)轫?xiàng)目是一個(gè)SPA頁(yè)面，隨著項(xiàng)目的不斷迭代，入口文件逐漸增大(app.js),所以想減少入口文件的體積。

方案

方案一：

webpack(require.ensure)+ react-router

因?yàn)槭褂胷equire.ensure需要足夠深的文件層級(jí)并且在對(duì)應(yīng)文件需要定義index.ts文件作為require.ensure入口，書寫起來(lái)比較麻煩，而且相對(duì)于工作量來(lái)說(shuō)也是大有增加(具體的實(shí)現(xiàn)方案網(wǎng)上也比較多),故沒(méi)有選擇。

方案二：

webpack(bundle-loader)+ react-router(lazyLoadComponent)

優(yōu)勢(shì)：
1、不用過(guò)多的文件層級(jí)，保持文件的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/", // 這里很關(guān)鍵=>多帶帶拿出來(lái)解釋
    },
    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：是我寫的正則用來(lái)匹配我需要異步加載的文件，并且使用use中的bundle-loader->ts-loader。
(ps:在ts-loader編譯全局文件時(shí)，需要exclude[需要異步加載的路徑])

route配置

// router.tsx

import * as EffectiveCustomer from "./pages/wuyoubao/customerManagement/effectiveCustomer";
function lazyLoadComponent(lazyModule) {  
    return (location, cb) => {
        lazyModule(module => cb(null, module.default));
    }
}
注意事項(xiàng)

因?yàn)閞outer.tsx中引用的tsx全部是被bundle-loader編譯的，而bundle-loader對(duì)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可以識(shí)別的方式：
import * as OrderInfoMessage from "./fundConfirmCom/fundConfirmInfoOrder";
console.log(OrderInfoMessage) // 可以解析

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/81825.html

相關(guān)文章

  • React-router 4 按需加載的實(shí)現(xiàn)方式及原理(Code Splitting)

    摘要：的按需加載方式中實(shí)現(xiàn)按需加載只需要按照下面代碼的方式實(shí)現(xiàn)就可以了。配置按需加載方式創(chuàng)建文件這個(gè)文件其實(shí)是個(gè)通過(guò)包裝后的組件來(lái)使用，下面會(huì)具體講這個(gè)東西。 React-router 4 介紹了在router4以后，如何去實(shí)現(xiàn)按需加載Component，在router4以前，我們是使用getComponent的的方式來(lái)實(shí)現(xiàn)按需加載的，router4中，getComponent方法已經(jīng)被移除...

    fuchenxuan 評(píng)論0 收藏0

  • React組件懶加載

    摘要：怎樣知道何時(shí)需要請(qǐng)求這個(gè)組件呢社區(qū)建議的是先加載一個(gè)容器組件這個(gè)容器組件本身非常小，當(dāng)這個(gè)容器組件被渲染到時(shí)則可認(rèn)為我們需要請(qǐng)求對(duì)應(yīng)的懶加載組件了。 React組件懶加載 Web應(yīng)用一個(gè)重要的優(yōu)勢(shì)就在于可以只加載我們想要的功能，而不必每次打開(kāi)都把整個(gè)系統(tǒng)載入 那么，在React里我們?cè)鯓訉?shí)現(xiàn)當(dāng)用到我們需求的功能時(shí)再請(qǐng)求對(duì)應(yīng)的組件，而不是一次性的請(qǐng)求全部代碼呢？ bundle-loade...

    mgckid 評(píng)論0 收藏0

  • 從前端開(kāi)發(fā)者看待用友建筑云移動(dòng)端單點(diǎn)登錄與報(bào)錯(cuò)原因

    摘要：本文對(duì)單點(diǎn)登錄有一個(gè)初步介紹，重點(diǎn)敘述前端開(kāi)發(fā)者使用單點(diǎn)登錄可能遇到的問(wèn)題，以及問(wèn)題分析方案全部來(lái)源于用友建筑云，本文僅用于內(nèi)部分享，所以不過(guò)多介紹方案實(shí)現(xiàn)。 本文對(duì)單點(diǎn)登錄有一個(gè)初步介紹，重點(diǎn)敘述前端開(kāi)發(fā)者使用單點(diǎn)登錄可能遇到的問(wèn)題，以及問(wèn)題分析！方案全部來(lái)源于用友建筑云，本文僅用于內(nèi)部分享，所以不過(guò)多介紹方案實(shí)現(xiàn)。原文來(lái)自博客 單點(diǎn)登錄介紹 showImg(https://seg...

    Youngdze 評(píng)論0 收藏0

  • react搭建后臺(tái)管理（react初窺）

    摘要：前言以前一直是用進(jìn)行的開(kāi)發(fā)于是決定年后弄一弄所以年后這段時(shí)間也就一直瞎弄可算是看到成果了本來(lái)是想寫一個(gè)類似仿今日頭條那樣的項(xiàng)目來(lái)入手后來(lái)又尋思還不如寫個(gè)后臺(tái)管理呢。于是乎自己便著手簡(jiǎn)單的搭建了一個(gè)集中設(shè)置的版本。 前言 以前一直是用vue進(jìn)行的開(kāi)發(fā), 于是決定年后弄一弄react, 所以年后這段時(shí)間也就一直瞎弄react, 可算是看到成果了 本來(lái)是想寫一個(gè) 類似 Vue仿今日頭條 那樣...

    wangjuntytl 評(píng)論0 收藏0

  • react-router 升級(jí)小記

    摘要：前言最近將公司項(xiàng)目的從版本升到了版本，跟完全不兼容，是一次徹底的重寫。升級(jí)過(guò)程中踩了不少的坑，也有一些值得分享的點(diǎn)。沒(méi)有就會(huì)匹配所有路由最后不得不說(shuō)升級(jí)很困難，坑也很多。 前言 最近將公司項(xiàng)目的 react-router 從 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次徹底的重寫。這也給升級(jí)造成了極大的困難，與其說(shuō)升級(jí)不如說(shuō)是對(duì) route...

    isLishude 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<