thắc mắc Hỏi về code splitting trong react , mong các thím giúp

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 ạ =(( .

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;
 

talatroi

Senior Member
ko thấy sai gì hết, mà thôi thím làm lun vs Nextjs đi, cũng codepliting mà có SSR sẵn nữa :sexy_girl:
 

munkylo

Senior Member
ko thấy sai gì hết, mà thôi thím làm lun vs Nextjs đi, cũng codepliting mà có SSR sẵn nữa :sexy_girl:
Không sai gì hả thím , em cũng nghĩ thế vì em thử dùng nó với delay các thứ vẫn oke nên chắc nó được nhưng mà lại ko thấy split code gì cả hay là em check chưa đúng nên chưa thấy :(( , nextjs có vẻ hay mà cảm giác react em chưa thuần thục lắm nên chưa ngó qua :(
 

monster_hunter

Senior Member
Nếu mún tối ưu hơn việc code spliting thì phải config cái phần bundle của app rồi. Cụ thể thì React xài Webpack để bundle nên cần config lại Webpack

Sent from Vsmart Active 3 using vozFApp
 

teeeeeeeee

Senior Member
Bạn implement react lazy thế nào mà network lại ko split code nhỉ
Mặc định nếu init app bằng create react app thì webpack đã đc config để có thể splitting code r :boss:
 
Last edited:

teeeeeeeee

Senior Member
ko thấy sai gì hết, mà thôi thím làm lun vs Nextjs đi, cũng codepliting mà có SSR sẵn nữa :sexy_girl:
Tùy nhu cầu muốn gì thì mới xài fence, giờ chuyển qua next chỉ vì cái vụ code splitting mà phải làm quen thêm mấy thứ routing hay config server của nó thì nổ não luôn :embarrassed:
 

munkylo

Senior Member
Bạn implement react lazy thế nào mà network lại ko split code nhỉ
Mặc định nếu init app bằng create react app thì webpack đã đc config để có thể splitting code r :boss:
Em viết như này thím ơi , cơ mà init app bằng cra thì webpack dc config rồi ấy ạ , vâng thế chắc em hiểu nhầm rồi , nếu như mà mặc định không split code thì nó sẽ chỉ build ra duy nhất 1 file bundle.js phải không ạ còn một số file như kiểu là vendor~main chunkjs với main.chunk.js thì tức là nó đã được split rồi phải không ạ

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 { Suspense } from "react/cjs/react.development";
import {lazy} from "@loadable/component";
const LoadableHome = lazy(()=>import("./Home"))
const LoadableContact = lazy(()=>import("./Contact"))
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>
   </Suspense>
  );
}

export default App;
 

talatroi

Senior Member
Tùy nhu cầu muốn gì thì mới xài fence, giờ chuyển qua next chỉ vì cái vụ code splitting mà phải làm quen thêm mấy thứ routing hay config server của nó thì nổ não luôn :embarrassed:
đúng là mất thời gian đó fen Thịnh, cái yếu của React là SEO kém, mà đa số các app giờ là Eccomerce hoặc gì đó giống vậy nên có lợi cho SEO là tốt hơn, còn khả năng tạo blog có thể áp vào app lun, còn app khác thì t ko biết
20218cdf5f09-d679-4b82-9966-f9186028d873.png
, vs nextjs đi chỉnh router còn ngon hơn cái ReactRouterDom, mới ra cái Router ver mới nữa, hình như có tận dụng serverless (đang tìm hiểu) :sexy_girl:
 

teeeeeeeee

Senior Member
Em viết như này thím ơi , cơ mà init app bằng cra thì webpack dc config rồi ấy ạ , vâng thế chắc em hiểu nhầm rồi , nếu như mà mặc định không split code thì nó sẽ chỉ build ra duy nhất 1 file bundle.js phải không ạ còn một số file như kiểu là vendor~main chunkjs với main.chunk.js thì tức là nó đã được split rồi phải không ạ

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 { Suspense } from "react/cjs/react.development";
import {lazy} from "@loadable/component";
const LoadableHome = lazy(()=>import("./Home"))
const LoadableContact = lazy(()=>import("./Contact"))
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>
   </Suspense>
  );
}

export default App;
Đúng r file các file của các component được split sẽ là các file chunk
Cứ xem nội dung các file đó là sẽ rõ th
 

munkylo

Senior Member
đúng là mất thời gian đó fen Thịnh, cái yếu của React là SEO kém, mà đa số các app giờ là Eccomerce hoặc gì đó giống vậy nên có lợi cho SEO là tốt hơn, còn khả năng tạo blog có thể áp vào app lun, còn app khác thì t ko biết
20218cdf5f09-d679-4b82-9966-f9186028d873.png
, vs nextjs đi chỉnh router còn ngon hơn cái ReactRouterDom, mới ra cái Router ver mới nữa, hình như có tận dụng serverless (đang tìm hiểu) :sexy_girl:
Thím cho em hỏi với là test Seo bằng thằng lighthouse của chrome dev tool chuẩn k nhỉ , em cũng thấy mọi người bảo là cái yếu của React là SEO kém nhưng em test trong cái app ecommerce nho nhỏ của em thì điểm SEO max trên pc với mobile gần max luôn :)
 

talatroi

Senior Member
Thím cho em hỏi với là test Seo bằng thằng lighthouse của chrome dev tool chuẩn k nhỉ , em cũng thấy mọi người bảo là cái yếu của React là SEO kém nhưng em test trong cái app ecommerce nho nhỏ của em thì điểm SEO max trên pc với mobile gần max luôn :)
ko biết rồi thím hỏi fen Thịnh xem, lần gần nhất mình dùng lighthouse là mình đo điểm bên PWA :sad:
 

rainbow007

Senior Member
Thím cho em hỏi với là test Seo bằng thằng lighthouse của chrome dev tool chuẩn k nhỉ , em cũng thấy mọi người bảo là cái yếu của React là SEO kém nhưng em test trong cái app ecommerce nho nhỏ của em thì điểm SEO max trên pc với mobile gần max luôn :)
SEO kém là sao nhỉ ??? nếu SSR thì cũng vậy mà còn CSR thì SEO k ngon là đúng rồi vì gg nó đọc html ... còn lighthouse thì thấy cũng oke suggestion của nó cũng ổn ... tuy nhiên nên check nhiều web hoặc tool khác để xem thêm
 
Top