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获取地址栏参数的几种方法小结
Feb 28 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
js窗口震动小程序分享
Nov 28 Javascript
Move.js入门
Feb 08 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
javascript实现倒计时效果
Feb 17 Javascript
微信小程序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生成Flash动画的实现代码
2010/03/12 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
js 上传图片预览问题
2010/12/06 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jquery滚动加载数据的方法
2015/03/09 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
python中ConfigParse模块的用法
2014/09/29 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
学习自我鉴定
2014/02/01 职场文书
建筑安全标语
2014/06/07 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
个人原因辞职信模板
2015/05/13 职场文书
金陵十三钗观后感
2015/06/04 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS