运用bundleloader异步加载reactrouter

重要手艺栈

React,
React-redux,
React-router,
Typescript,
antd,
Immutable,
&＃8230;

需求

由于项目是一个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: /src\\pages(\\.*).(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: /src\\pages(\\.*).(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) // 能够剖析