react 实现页面代码分割、按需加载

JasinYip 发布于2019-08-22 15:59 / 415人阅读

摘要：虽然一直有做相关的优化，按需加载分离服务端渲染，但是从来没有从路由代码分割这一块入手过，昨天在本地开发时没有测试成功，今天又搞了下，已经部署到线上环境了，今天就这个记录一下。

虽然一直有做 react 相关的优化，按需加载、dll 分离、服务端渲染，但是从来没有从路由代码分割这一块入手过，昨天在本地开发时没有测试成功，今天又搞了下，已经部署到线上环境了，今天就这个记录一下。

修改配置

开发环境：webpack@v3 、react-router@v4

安装依赖：

$ yarn add babel-plugin-syntax-dynamic-import -dev

修改 .babelrc 文件：在 plugins 中添加 "syntax-dynamic-import"

改造项目代码

安装依赖：

$ yarn add react-loadable

根据 react-loadable 文档提示，我们需要提供一个载入新页面时的 Loading 组件，同时对加载和超时状态进行区别提示：

import React from "react";
import { Icon } from "antd";

const Loading = ({ pastDelay, timedOut, error }) => {
  if (pastDelay) {
    return ;
  } else if (timedOut) {
    return Taking a long time...;
  } else if (error) {
    return Error!;
  }
  return null;
};

更改页面组件导入方法：

import React from "react";
import Loadable from "react-loadable";
import { Route, Switch } from "react-router-dom";

const Home = Loadable({
  loader: () => import("../Home"),
  loading: Loading,
  timeout: 10000
});
const EditArticle = Loadable({
  loader: () => import("../EditArticle"),
  loading: Loading,
  timeout: 10000
});

...

然后打包结果就会分离出各页面代码：

在页面中我们只需要载入入口文件 app.js ，其他脚本在访问到对应页面时都会经由这个文件载入。

验证结果

在将静态资源上传到 cdn 之后，在页面中加载 app.css 和 app.js ，运行之后访问各个页面就会依次加载对应脚本，结果如图：

可以看到，在访问第一个页面时加载的页面脚本经 gzip 压缩后仅有 21.8KB ！！！当然这与页面复杂度也有关，但是相较于加载全部脚本，已经是大幅减少了，这种优化对访问目标性很强的用户感受起来尤为明显。

这么做的另一个好处就是当我们只更改项目中某些页面的业务代码时，其他页面的代码依然是不变的，所以这个时候其他页面用的是客户端缓存，从另一个层面又做了一次优化。

Tips

react-loadable 还有其他配置选项，可以按需配置；

这里还需要注意的一点是：webpack 中的 output.publicPath 选项，这个配置会影响 app.js 从何处加载页面脚本，正确的写法应该是脚本文件载入的前缀地址，例如： 0.js 的远程链接为 http://static.domain.com/rele... ，那么这个应该配置为 http://static.domain.com/rele... 。

该文章首发于我的博客https://blog.bingqichen.me/

云服务器 GPU云服务器 java实现页面加载按需加载按需加载javascript webpack按需加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93942.html

webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

摘要：或者的，都会对其进行分析。舒适的开发体验，有助于提高我们的开发效率，优化开发体验也至关重要组件热刷新热刷新自从推出热刷新后，前端开发者在开环境下体验大幅提高。实现热调试后，调试流程大幅缩短，和普通非直出模式调试体验保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的资源不知道不...

李增田 2019-08-30 11:09 评论0 收藏0
webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

摘要：或者的，都会对其进行分析。舒适的开发体验，有助于提高我们的开发效率，优化开发体验也至关重要组件热刷新热刷新自从推出热刷新后，前端开发者在开环境下体验大幅提高。实现热调试后，调试流程大幅缩短，和普通非直出模式调试体验保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的资源不知道不...

stdying 2019-08-02 15:16 评论0 收藏0
webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

摘要：或者的，都会对其进行分析。舒适的开发体验，有助于提高我们的开发效率，优化开发体验也至关重要组件热刷新热刷新自从推出热刷新后，前端开发者在开环境下体验大幅提高。实现热调试后，调试流程大幅缩短，和普通非直出模式调试体验保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的资源不知道不...

The question 2019-08-23 18:05 评论0 收藏0
前端性能优化—js代码打包

摘要：注意使用的版本不同，可能会导致打包出的结果不一样。完整的优化代码见有用的文章分离第三方库及公用文件现在的 web 应用，内容一般都很丰富，站点需要加载的资源也特别多，尤其要加载很多 js 文件。js 文件从服务端获取，体积大小决定了传输的快慢；浏览器端拿到 js 文件之后，还需要经过解压缩、解析、编译、执行操作，所以，控制 js 代码的体积以及按需加载对前端性能以及用户体验是十分的重...

Rango 2019-08-23 11:53 评论0 收藏0