munkylo
Senior Member
Như tit ạ , các thím cho em hỏi với là em có sử dụng @loadable/component để split code, em có xem doc của nó và xem một số tutorial thì hướng dẫn là check bằng 2 cách , cách 1 là npm run build xong nó các file nó sẽ được tách ra khỏi bundle.js để load nhanh hơn , cách 2 là mở tab network của chrome dev tool lên rồi check mỗi lần reload thì sẽ hiện ra , nhưng mà em sử dụng thư viện này thì lúc run build hay lên network check đều không có gì khác biệt cả nó như kiểu không hoạt động vậy 
, em có sử dụng thử sang lazy của react cung cấp thì lúc run build nó có split code được rồi cơ mà lên network thì lại ko thấy code được split . Em có tìm hiểu rồi mà không hiểu lỗi ở thư viện hay có làm sai gì ở đâu không mong các thím giúp ạ , bên dưới là code của em ở App.js bên cạnh nó là 2 component home và contact , em tạo bằng create-react-app ạ và em chắc chắn là ko bị sai đường dẫn đên 2 component kia ạ 
.
, em có sử dụng thử sang lazy của react cung cấp thì lúc run build nó có split code được rồi cơ mà lên network thì lại ko thấy code được split . Em có tìm hiểu rồi mà không hiểu lỗi ở thư viện hay có làm sai gì ở đâu không mong các thím giúp ạ , bên dưới là code của em ở App.js bên cạnh nó là 2 component home và contact , em tạo bằng create-react-app ạ và em chắc chắn là ko bị sai đường dẫn đên 2 component kia ạ .
JavaScript:
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link, } from "react-router-dom";
import Home from "./Home";
import Contact from "./Contact";
import loadable from "@loadable/component";
const LoadableHome = loadable(()=>import("./Home"),{
fallback: <div>Loading</div>
})
const LoadableContact = loadable(()=>import("./Contact"),{
fallback: <div>Loading</div>
})
function App() {
return (
<Router>
<Link to="/" >Home</Link>
<Link to="/contact" >Contact</Link>
<Switch>
<Route path="/" exact>
<LoadableHome />
</Route>
<Route path="/contact" exact>
<LoadableContact />
</Route>
</Switch>
</Router>
);
}
export default App;
