2
[email protected]と[email protected]を使用してダッシュボードテンプレートを作成し、動的インポートからチャンクファイルを生成しようとしていますが、ファイルは生成されません。 :(私は、インポートおよびレンダリングされるコンポーネントをレンダリングすることができますが、ファイルが作成されていないとコンポーネントを動的にインポートされていないようです。Webpack＆React動的インポートチャンクファイルが生成されない
を私がやったこと
- セット「構文ダイナミックインポート」と "ダイナミック・輸入のWebPACKは、" 私が期待したものWebPACKの出力
へ
-
- "反応する" バージョン
ルート
に基づいて動的な輸入のうち、チャンクファイルの生成」^16.0.0" - "反応し、ルータを"： "^ 4.2.0"
- "反応-ルータ-DOMを"： "^ 4.2.2"
- "バベル - プラグインのダイナミックインポート - WebPACKの"： "^ 1.0.1"
- "バベル - プラグインの構文ダイナミックインポート"： "^ 6.18.0"
- "のWebPACK"： "ここでは3.1.0"
は私の.babelrc
{
"presets": [
"react",
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
],
"plugins": [
"syntax-dynamic-import",
"dynamic-import-webpack",
"transform-export-extensions",
"transform-class-properties",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}],
["transform-object-rest-spread", {
"useBuiltIns": true
}]
]
}
であり、これはApp.jsxであると私は
const loadDashboard1 = import(/* webpackChunkName: "dashboard1" */ '../Dashboard1/index.jsx')
const Dashboard1 = (props) => <AsyncComponent lazyLoadComponent={loadDashboard1} props={props} />
const Dashboard =() => (
<div>
<Switch>
<Route path="/dashboard/1" component={Dashboard1} /> //*** This should be dynamic imported and make chunk file
<Route path="/dashboard/2" component={Dashboard2} />
<Route path="/dashboard/3" component={Dashboard3} />
</Switch>
</div>
)
const App =() => (
<div className={wrapper}>
<HeaderMain />
<Route path="/dashboard" component={SidebarLeft} />
<main className={content}>
<Switch>
<Route path="/dashboard" component={Dashboard} />
<Route path="/" component={HomePage} />
</Switch>
</main>
</div>
)
export default App
ここは私のwebpack.config.jsです。私はここにAsyncComponentがあるchunkFilename
を追加しました。あなたはこの問題を解決したり、さらに情報を必要とする任意のアイデアを持っている場合は
import React from 'react'
class AsyncComponent extends React.Component {
state = {
Component: null,
isLoaded: false,
}
async componentWillMount() {
const module = await this.props.lazyLoadComponent
this.setState({
Component: module.default ,
isLoaded: true,
})
}
render() {
const { Component } = this.state
return (
<div>{this.state.isLoaded ? <Component /> : this.props.loader}</div>
)
}
}
export default AsyncComponent
これはWebPACKの
main.5227b4d762a52f00aeb2.js 262 kB 0 [emitted] [big] main
vendor.478de73b0c92dd129de6.js 116 kB 1 [emitted] vendor
main.5227b4d762a52f00aeb2.js.map 1.53 MB 0 [emitted] main
vendor.478de73b0c92dd129de6.js.map 420 kB 1 [emitted] vendor
index.html 297 bytes [emitted]
外の結果であり、私に知らせてください。
ありがとうございました！
試しただけでなく、 – Scott
ありがとう、スコット！ :) – undefined