当前位置: 首页 > 编程笔记 >

Webpack3+React16代码分割的实现

淳于哲
2023-03-14
本文向大家介绍Webpack3+React16代码分割的实现,包括了Webpack3+React16代码分割的实现的使用技巧和注意事项,需要的朋友参考一下

项目背景

最近项目里有个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构建包后,如图

问题非常明显:

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

动态import拆分vender

分析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 解析到该语法时,会自动进行代码分割。

修改后的效果:

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自动拆分成了不同的文件,当切换路由时,才会拉取目标路由代码文件。

命名导出

该段引用自 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。

从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过大,其实还可以继续拆分)

总结

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

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

 类似资料:
  • 在大型 Web 应用程序中,通常需要将应用程序代码拆分为多个可以按需加载的 JS 包。 这种称为“代码分割”的策略通过减小初次加载时的 JS 的包的大小,来提高应用程序的性能。 要使用 Redux 进行代码拆分,我们希望能够将 reducer 动态添加到 store。 但是,Redux 实际上只有一个 root reducer 函数。 这个 root reducer 通常是在初始化应用程序时通过调

  • 每个页面只会导入import中绑定以及被用到的代码. 也就是说并不会加载不需要的代码! import cowsay from 'cowsay-browser' export default () => <pre> {cowsay.say({ text: 'hi there!' })} </pre>

  • 使用 vue-router 的路由 你可能已经注意到,我们的服务器代码使用了一个 * 处理程序,它接受任意 URL。这允许我们将访问的 URL 传递到我们的 Vue 应用程序中,然后对客户端和服务器复用相同的路由配置! 为此,建议使用官方提供的 vue-router。我们首先创建一个文件,在其中创建 router。注意,类似于 createApp,我们也需要给每个请求一个新的 router 实例,

  • 本文向大家介绍批处理中字符串分割实现代码,包括了批处理中字符串分割实现代码的使用技巧和注意事项,需要的朋友参考一下 批处理 字符串分割 实例 使用for命令可以对字符串进行分段处理。 分割字符串 主要解释for语句: delims=;表示以分号作为分隔符,对remain字符串进行分割处理。 tokens=1*,tokens表示分段的方式,tokens=1*表示第一个分隔符;之前的作为一部分,剩下的

  • 使用vue-router的路由 你可能已经注意到,我们的服务器代码使用了一个*处理程序,它接受任意 URL。这允许我们将访问的 URL 传递到我们的 Vue 应用程序中,然后对客户端和服务器复用相同的路由配置! 为此,建议使用官方提供的vue-router。我们首先创建一个文件,在其中创建 router。注意,类似于createApp,我们也需要给每个请求一个新的 router 实例,所以文件导出

  • 本文向大家介绍Java实现文件切割拼接的实现代码,包括了Java实现文件切割拼接的实现代码的使用技巧和注意事项,需要的朋友参考一下 单线程实现 文件分割 在老的FAT32文件系统中,最大的单个文件大小必须保存在4G内,对于经常看电影的我这个是不能允许的。不过现在Windows有NTFS文件系统,Linux大部分发行版为Ext4文件系统,最大单个文件大小能大于4G。不过这二者并不能兼容。。格式化NT