详解react-router如何实现按需加载-创新互联-成都快上网建站

详解react-router如何实现按需加载-创新互联

注:本文使用的 react-router 版本为 2.8.1

创新互联是一家专注于成都网站设计、网站制作与策划设计,东源网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:东源等地区。东源做网站价格咨询:18982081108

React Router 是一个非常出色的路由解决方案,同时也非常容易上手。但是当网站规模越来越大的时候,首先出现的问题是 Javascript 文件变得巨大,这导致首页渲染的时间让人难以忍受。实际上程序应当只加载当前渲染页所需的 JavaScript,也就是大家说的“代码分拆" — 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。

所得到的效果是:

以前是这样(23333,我真不是故意的。。)

详解react-router如何实现按需加载

现在是这样:

详解react-router如何实现按需加载

实际上就是将一个大 javascript 文件拆分成了若干个 chunk file。

下面是改造过程

Webpack 配置

首先在webpack.config.jsoutput内加上chunkFilename

output: {
  path: path.join(__dirname, '/../dist/assets'),
  filename: 'app.js',
  publicPath: defaultSettings.publicPath,
  // 添加 chunkFilename
  chunkFilename: '[name].[chunkhash:5].chunk.js',
},

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:详解react-router如何实现按需加载-创新互联
分享路径:http://kswjz.com/article/dhghde.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流