react-loadable使用跳坑

官方給react-loadable的定義是：

A higher order component for loading components with dynamic imports.

動態路由示例

withLoadable.js

import React from 'react'
import Loadable from 'react-loadable';

export function withLoadable (comp) {
  return Loadable({
    loader: comp,
    loading: () => (
      <div>Loading...</div>
    )
  })
}

 

Root.js

import React from 'react'
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router-dom'
import { ConnectedRouter } from 'react-router-redux'
import createHistory from 'history/createHashHistory'

import App from './App'
import { withLoadable } from '../components/withLoadable'
const history = createHistory()
const Home = withLoadable(() => import('./Home/Home'))

const Root = ({ store }) => (
  <Provider store={store}>
    <App>
      <ConnectedRouter history={history}>
        <Switch>  
          <Route path="*" component={Home}/>
        </Switch>
      </ConnectedRouter>
    </App>
  </Provider>
)

 

1 style: security content policy報錯

當less文件打開sourcemap後，遇到security content policy 報錯，屏蔽就行了，如今也沒弄明白緣由，如遇大神，請指教！

{
      test: /\.less$/,
      loader: ExtractTextPlugin.extract(
        Object.assign(
          {
            fallback: {
              loader: require.resolve('style-loader'),
              options: {
                hmr: false
              }
            },

            use: [
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  minimize: true
                  /* 不然security centent policy error */
                  // sourceMap: shouldUseSourceMap
                }
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      flexbox: true
                    })
                  ]
                }
              },
              {
                loader: 'less-loader',
                options: { modifyVars: theme }
              }
            ]
          },
          extractTextPluginOptions
        )
      )
    }

 

2 createBrowserHistory或者createHashHistory對於react-loadable加載模塊路徑的影響

當使用createBrowserHistory時，路由跳轉會根據當前路徑加載模塊，假設當前路徑爲:'localhost:3000/',當跳轉到finished時，會加載/finished/static/js/finished_module.js， 從而報錯，但應該加載/static/js/finished_module.js，因此，最後使用hash路徑

<Provider store={store}>
    <App>
      <ConnectedRouter history={history}>
        <Switch>
          <Route path="/additionalFunc/:cardName"
                 component={AdditionalFunc}/>
          <Route path="/finished" component={Finished}/>
          {/*<Route path="/wisdomWash" component={WisdomWash}/>*/}
          {/*<Route path="/geek" component={Geek}/>*/}
          <Route path="*" component={Home}/>
        </Switch>
      </ConnectedRouter>
    </App>
  </Provider>

 

 

參考資料：https://github.com/jamiebuilds/react-loadable