成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

BicycleWarrior / 741人閱讀

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

主要技術(shù)棧

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

需求

因為項目是一個SPA頁面，隨著項目的不斷迭代，入口文件逐漸增大(app.js),所以想減少入口文件的體積。

方案

方案一：

webpack(require.ensure)+ react-router

因為使用require.ensure需要足夠深的文件層級并且在對應(yīng)文件需要定義index.ts文件作為require.ensure入口，書寫起來比較麻煩，而且相對于工作量來說也是大有增加(具體的實現(xiàn)方案網(wǎng)上也比較多),故沒有選擇。

方案二：

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

優(yōu)勢：
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/", // 這里很關(guān)鍵=>多帶帶拿出來解釋
    },
    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) // 可以解析

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81825.html

相關(guān)文章

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

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

    fuchenxuan 評論0 收藏0

  • React組件懶加載

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

    mgckid 評論0 收藏0

  • 從前端開發(fā)者看待用友建筑云移動端單點登錄與報錯原因

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

    Youngdze 評論0 收藏0

  • react搭建后臺管理（react初窺）

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

    wangjuntytl 評論0 收藏0

  • react-router 升級小記

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

    isLishude 評論0 收藏0

發(fā)表評論

0條評論

BicycleWarrior

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<