项目地址:ReactSPA

使用 webpack 插件找出占用空间较大的包

开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例:浏览器中输入 http://localhost:3000/analyze.html 可以看到如下效果:

按需加载

  • 对模块结合 babel 进行按需加载;
  • 测试 day.js 替代 moment.js. 实际上 moment.js 也使用按需加载 了(实验减少了 40KB+),所以最终结果相差不大;

code-spliting

使用 MiniCssExtractPlugin 插件分离 JavaScript 和 Css 文件:

  823.94 KB           build / static / js / main.496a38b7.js
8.2 KB build / static / css / main.css

code-spliting 官方给出三种方案,分别如下:

方案一:在 entry 处增加打包入口

方案一的缺点如下:

  • 如果多个文件引人了相同的包(比如 lodash),引用的包会被分别打包两次;
  • 这种方案不够灵活,无法根据逻辑动态分割代码;

所以方案一通常会结合方案二、方案三一起使用,方案一的配置大致如下:

entry: [require.resolve('./polyfills'), paths.appIndexJs],

// 也可以写成

entry: {
polyfill: require.resolve('./polyfills'),
IndexJs: paths.appIndexJs,
},

方案二:使用插件 SplitChunkPlugin

  optimization: {
runtimeChunk: false,
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
maxAsyncRequests: 5,
priority: 10,
enforce: true,
},
},
},
},

打包效果如下:

  723.96 KB  build/static/js/vendor.a9289a29.chunk.js // node-modules 模块
98.72 KB build/static/js/main.7bcaca24.js
8.2 KB build/static/css/1.css

此时将 node-modules 里的包打包成了一个大块头,这样对加载仍然是不友好的。解决方案为:将核心的框架单独打包出来,剩余模块异步加载,比如可以使用 bundle-loader)。

  optimization: {
runtimeChunk: false,
splitChunks: {
cacheGroups: {
vendor1: { // 主要模块
chunks: 'all',
test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/,
name: 'vendor1',
maxAsyncRequests: 5,
priority: 10,
enforce: true,
},
vendor2: { // 次要模块
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
name: 'vendor2',
maxAsyncRequests: 5,
priority: 9,
enforce: true,
reuseExistingChunk: true,
},
},
},
}

打包效果如下:

  588.06 KB  build/static/js/vendor2.d63694f4.chunk.js
133.17 KB build/static/js/vendor1.0d40234c.chunk.js
98.72 KB build/static/js/main.b7a98d03.js
8.2 KB build/static/css/2.css

可以看到此时 node_modules 包已经被拆分成了核心模块和非核心模块。

使用动态引入语法 import()

首先使用官网安利的 react-loadable 这个包,它的思想是根据路由(代替模块)进行代码的动态分割,异步加载所需要的组件,从而极大地提高页面加载速率。

在路由界面进行如下配置:

const Loading = () => <div>Loading...</div>

const Home = Loadable({
loader: () => import('../pages/home'),
loading: Loading,
}) // 类似这样使用路由
<Router>
<Route path="/home" component={Home} />
<Route path="/follow" component={Follow} />
<Route path="/tools" component={Tools} />
<Route path="/music" component={Music} />
<Route path="/todo" component={Todo} />
<Route path="/album" component={Album} />
<Route path="/editor" component={Editor} />
<Route path="/todoList" component={TodoList} />
<Route path="/searchEngine" component={Search} />
<Route path="/waterfall" component={Waterfall} /
</Router>

我们来看代码分割后的结果:

这里测试结果是去掉方案二的配置后进行的,实验对比后,使用方案三的方式稍优于方案二、三共同使用的方式。

  235.89 KB  build/static/js/IndexJs.57ee1596.js
225.94 KB build/static/js/15.c09a5919.chunk.js
138.18 KB build/static/js/17.30c26142.chunk.js
82.71 KB build/static/js/1.667779a6.chunk.js
57.55 KB build/static/js/16.f8fa2302.chunk.js
16.46 KB build/static/js/2.e7b77a5d.chunk.js
14.79 KB build/static/js/18.cad1f84d.chunk.js
12.51 KB build/static/js/0.73df11a7.chunk.js
11.22 KB build/static/js/13.19501c58.chunk.js
8.34 KB build/static/js/5.33fd1c35.chunk.js
7 KB build/static/js/8.9f1d0a47.chunk.js
5.86 KB build/static/js/12.24f0a7ec.chunk.js
5.06 KB build/static/css/18.css
4.97 KB build/static/js/polyfill.1c61a660.js
3.58 KB build/static/js/7.dd4976e3.chunk.js
3.53 KB build/static/js/14.16f6b811.chunk.js
3.42 KB build/static/css/17.css
2.98 KB build/static/js/10.464a61e4.chunk.js
2.02 KB build/static/js/11.3728d5a9.chunk.js
1.45 KB build/static/js/6.92fbac58.chunk.js
1.13 KB build/static/js/9.59160a3a.chunk.js

有多少个路由,react-loadable 库就自动帮我们多拆分了多少个包文件。可以想象在越大的项目中,这种动态引人库的好处越明显。

而且可以很清晰的看到,当我们在 /home 下,只有 home 组件是被加载的,其他组件并没有被加载!

那么 react-loadable 的神秘之力是如何实现的呢,它本质上是个运用了属性代理的高阶函数,通过在高阶函数里配合 import() 加进各种状态,从而达到异步加载模块的效果。

参考文献

code-splitting

Code-Splitting(react)

打包优化实践(如何Code Spliting)的更多相关文章

  1. 基于 Ant Desigin 的后台管理项目打包优化实践

    背景 按照 Ant Design 官网用 React 脚手构建的后台项目,刚接手项目的时候大概30条路由左右,我的用的机子是 Mac 8G 内存,打包完成需要耗时2分钟左右,决定优化一下. 项目技术栈 ...

  2. webpack打包优化实践

    事情缘由 近段时间在做基于scratch3.0的改造项目.基于scratch-gui改造,项目本身已经很大了,然后里面还要用到scratch-blocks,scratch-vm,scratch-ren ...

  3. Tree-Shaking性能优化实践 - 原理篇

    Tree-Shaking性能优化实践 - 原理篇   一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前 ...

  4. webpack指南(二)code spliting+懒加载

    code spliting 把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件. 代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时 ...

  5. 爱奇艺技术分享:爱奇艺Android客户端启动速度优化实践总结

    本文由爱奇艺技术团队原创分享,原题<爱奇艺Android客户端启动优化与分析>. 1.引言 互联网领域里有个八秒定律,如果网页打开时间超过8秒,便会有超过70%的用户放弃等待,对Andro ...

  6. webpack原理探究 && 打包优化

    在做vue项目和react项目时,都用到了webpack.webpack帮助我们很好地提高了工作效率,但是一直以来没有对其原理进行探究,略有遗憾. 因为使用一个工具,能够深入了解其原理才能更好地使用. ...

  7. 一个Web报表项目的性能分析和优化实践(六):设置MySQL的最大连接数(max_connections)

    在上一篇文章中"一个Web报表项目的性能分析和优化实践(二):MySQL数据库连接不够用(TooManyConnections)问题的一次分析和解决案例"提到,项目中新增几个数据库 ...

  8. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  9. Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...

随机推荐

  1. asp.net MVC NPOI导出excel通用

    一.创建一个类文件添加 public class ExportToExcelColumn { public ExportToExcelColumn(string _Columnnames, strin ...

  2. php ip2long负数的问题

    大家可能都知道php提供了ip2long与long2ip方法对ip地址处理.抛砖引玉,说点概念性滴: 1.ip2long — 将一个IPV4的字符串互联网协议转换成数字格式 int ip2long ( ...

  3. 过滤器(Filter)和拦截器(Interceptor)

    过滤器(Filter) Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序.它依赖于servlet容器,在实现上,基于函数回调,它可以对几乎所有请求 ...

  4. CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

    1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...

  5. vue项目利用apicloud打包成apk过程

    最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接 ...

  6. 谷歌浏览器扩展程序manifest.json参数详解

    { // Required "manifest_version": 2, // manifest编写规范版本,目前主流2 "name": "My Ex ...

  7. 作为开发人员,这四类Code Review方法你都知道吗?

    本文翻译自:https://dzone.com/articles/4-types-of-code-reviews-any-professional-developer 转载请注明出处:葡萄城官网,葡萄 ...

  8. 原生Js交互之DSBridge

    文章链接:https://mp.weixin.qq.com/s/Iqd0dKM-ZW4UwkIgSTnvYg 在上一篇文章「android 记一次富文本加载之路」中 介绍了关于android加载富文本 ...

  9. SpringMVC解决@ResponseBody返回Json的Date日期类型的转换问题

    在做项目的时候,发现后台把Date类型的属性以json字符串的形式返回,前台拿不到转换后的日期格式,始终响应回去的都是long类型时间戳. 查阅资料之后找到解决方法: 方法一(在springmvc的x ...

  10. 【原】Java学习笔记015 - 面向对象

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 传递 值类型参数 ...