这次给大家带来怎么让页面代码分割并且按需加载，让页面代码分割并且按需加载的注意事项有哪些，下面就是实战案例，一起来看一下。
修改配置
开发环境：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 ！！！当然这与页面复杂度也有关，但是相较于加载全部脚本，已经是大幅减少了，这种优化对访问目标性很强的用户感受起来尤为明显。
这么做的另一个好处就是当我们只更改项目中某些页面的业务代码时，其他页面的代码依然是不变的，所以这个时候其他页面用的是客户端缓存，从另一个层面又做了一次优化。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
vue组件中slot插口使用详解
实现js同源策略与跨域访问步骤详解
以上就是怎么让页面代码分割并且按需加载的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2765608.html
