Webpack3+React16代码分割的实现


Posted in Javascript onMarch 03, 2021

项目背景

最近项目里有个webpack版本较老的项目,由于升级和换框架暂时不被leader层接受o(???)o,只能在现有条件进行优化。

webpack3 + react16

webpack v3配置检查

很明显项目的配置是从v1继承过来的,v1->v3的升级较为简单,参考官网https://webpack.js.org/migrate/3/即可。

loaders变为rules
不再支持链式写法的loader,json-loader不需要配置
UglifyJsPlugin插件需要自己开启minimize

分析现有包的问题

使用webpack-bundle-analyzer构建包后,如图

Webpack3+React16代码分割的实现

问题非常明显:

除了zxcvbn这个较大的包被拆出来,代码就简单的打包为了vender和app,文件很大。

动态import拆分vender

Webpack3+React16代码分割的实现

分析vender的代码,某些大包,例如libphonenumber.js,使用场景不是很频繁,将它拆出来,当使用到相关特性时再请求。

参考react官方代码分割指南, https://react.docschina.org/docs/code-splitting.html#import

import { PhoneNumberUtil } from 'google-libphonenumber'
function usePhoneNumberUtil(){
  // 使用PhoneNumberUtil
}

修改为动态 import() 方式,then和async/await都支持用来获取异步数据

const LibphonenumberModule = () => import('google-libphonenumber')
function usePhoneNumberUtil(){
  LibphonenumberModule().then({PhoneNumberUtil} => {
    // 使用PhoneNumberUtil
  })
}

当 Webpack 解析到该语法时,会自动进行代码分割。

修改后的效果:

Webpack3+React16代码分割的实现

libphonenumber.js(1.chunk.js)从vender中拆分出来了,并且在项目实际运行中,只有当进入usePhoneNumberUtil流程时,才会向服务器请求libphonenumber.js文件。

基于路由的代码分割

React.lazy

参考react官方代码分割指南-基于路由的代码分割,https://react.docschina.org/docs/code-splitting.html#route-based-code-splitting。

拆分前示例:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
const Home = import('./routes/Home');
const About = import('./routes/About');

const App = () => (
<Router>
 <Suspense fallback={<div>Loading...</div>}>
  <Switch>
   <Route exact path="/" component={Home}/>
   <Route path="/about" component={About}/>
  </Switch>
 </Suspense>
</Router>
);

拆分后示例:

import React, { lazy } from 'react';
import { Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
// 路由配置不变
)

拆分后效果:

app.js按照路由被webpack自动拆分成了不同的文件,当切换路由时,才会拉取目标路由代码文件。

Webpack3+React16代码分割的实现

命名导出

该段引用自 https://react.docschina.org/docs/code-splitting.html#named-exports 。

React.lazy 目前只支持默认导出(default exports)。如果你想被引入的模块使用命名导出(named exports),你可以创建一个中间模块,来重新导出为默认模块。这能保证 tree shaking 不会出错,并且不必引入不需要的组件。

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

自己实现AsyncComponent

React.lazy包裹的懒加载路由组件,必须要添加Suspense。如果不想强制使用,或者需要自由扩展lazy的实现,可以定义实现AsyncComponent,使用方式和lazy一样。

import AsyncComponent from './components/asyncComponent.js'
const Home = AsyncComponent(() => import('./routes/Home'));
const About = AsyncComponent(() => import('./routes/About'));
// async load component
function AsyncComponent(getComponent) {
 return class AsyncComponent extends React.Component {
  static Component = null
  state = { Component: AsyncComponent.Component }

  componentDidMount() {
   if (!this.state.Component) {
    getComponent().then(({ default: Component }) => {
     AsyncComponent.Component = Component
     this.setState({ Component })
    })
   }
  }
  // component will be unmount
  componentWillUnmount() {
   // rewrite setState function, return nothing
   this.setState = () => {
    return
   }
  }
  render() {
   const { Component } = this.state
   if (Component) {
    return <Component {...this.props} />
   }
   return null
  }
 }
}

common业务代码拆分

在完成基于路由的代码分割后,仔细看包的大小,发现包的总大小反而变大了,2.5M增加为了3.5M。

Webpack3+React16代码分割的实现

从webpack分析工具中看到,罪魁祸首就是每一个单独的路由代码中都单独打包了一份components、utils、locales一类的公共文件。

使用webapck的配置将common部分单独打包解决。

components文件合并导出

示例是将components下的所有文件一起导出,其他文件同理

function readFileList(dir, filesList = []) {
 const files = fs.readdirSync(dir)
 files.forEach((item) => {
  let fullPath = path.join(dir, item)
  const stat = fs.statSync(fullPath)
  if (stat.isDirectory()) {
   // 递归读取所有文件
   readFileList(path.join(dir, item), filesList)
  } else {
   /\.js$/.test(fullPath) && filesList.push(fullPath)
  }
 })
 return filesList
}
exports.commonPaths = readFileList(path.join(__dirname, '../src/components'), [])

webpack配置抽离common

import conf from '**';
module.exports = {
 entry: {
  common: conf.commonPaths,
  index: ['babel-polyfill', `./${conf.index}`],
 },
 ... //其他配置
 plugins:[
  new webpack.optimize.CommonsChunkPlugin('common'),
  ... // other plugins
 ]
}

在webpack3中使用CommonsChunkPlugin来提取第三方库和公共模块,传入的参数 common 是entrty已经存在的chunk, 那么就会把公共模块代码合并到这个chunk上。

提取common后的代码

将各个路由重复的代码提取出来后,包的总大小又变为了2.5M。多出了一个common的bundle文件。(common过大,其实还可以继续拆分)

Webpack3+React16代码分割的实现

总结

webpack打包还有很多可以优化的地方,另外不同webpack版本之间也有点差异,拆包思路就是提取公共,根据使用场景按需加载。

到此这篇关于Webpack3+React16代码分割的实现的文章就介绍到这了,更多相关Webpack3+React16代码分割内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js展开闭合效果演示代码
Jul 24 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
js获取 type=radio 值的方法
May 09 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
微信小程序input抖动问题的修复方法
Mar 03 #Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 #Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 #Vue.js
基于JavaScript实现简单的轮播图
Mar 03 #Javascript
js面向对象方式实现拖拽效果
Mar 03 #Javascript
Vue多选列表组件深入详解
Mar 02 #Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
You might like
浅析十款PHP开发框架的对比
2013/07/05 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
解析Python编程中的包结构
2015/10/25 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
在python image 中实现安装中文字体
2020/05/16 Python
python批量生成条形码的示例
2020/10/10 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
三分钟演讲稿事例
2014/03/03 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2015年党小组工作总结
2015/05/26 职场文书
国王的演讲观后感
2015/06/03 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书