UMI2分包splitChunks配置
source link: https://yazhen.me/_posts/2021/UMI2%E5%88%86%E5%8C%85splitChunks%E9%85%8D%E7%BD%AE/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
umi 分包配置 配置之前 bundle size 是 37.7 MB 配置之后 bundle size 是 18.8 MB 终于降到 20MB 以下了。
结合上一篇查看更多解释
配置主要是2点
- chainWebpack 扩展
- react-plugin-react 中 chunks 的设置
话不多说，下面放出相关配置：
chainWebpack: function(config, { webpack }) {
config.optimization.splitChunks({
chunks: 'async',
automaticNameDelimiter: '.',
name: true,
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 5,
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
test: /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom|react-resizable|react-base-table|dva)[\\/]/,
priority: -10,
},
antds: {
name: 'antds',
chunks: 'all',
test: /[\\/]node_modules[\\/](antd|antdesign-ui|rc-calendar|rc-tree-select)[\\/]/,
priority: -11,
},
charts: {
name: 'charts',
chunks: 'all',
test: /[\\/]node_modules[\\/](echarts|echarts-for-react)[\\/]/,
priority: -12,
},
default: {
minChunks: 1,
priority: -20,
reuseExistingChunk: true
}
}
})
},然后在 umi-plugin-react 中配置 chunks :
chunks: ["vendors","antds","charts", "umi"],至此再运行 npm run build 包已经被成功分割了。
Recommend
-
102
基于拆分包的React Native在iOS端加载性能优化 刘亚东...
-
45
The official release of Webpack-4 boasts about the proven faster build time (around 98%) and reduced chunk sizes. However, Webpack authors dropped a bomb in developer community by making one major…
-
51
转自：工程综合 建设工程中发包、承包、分包、转包、内包、挂靠是工程中一个很普遍的工程现象和常见的法律问题，也是大家经常遇到或者听到的问题。很多人把这几者的关系容易给整混淆...
-
59
「离线包」机制 微信小程序采用的是类似离线包加载方案，以转转小程序为例，当用户第一次打开时会先下载好所有代码，然后再加载页面；当用户再次进入转转小程序时，会直接使用已下载的代码，省去了代码下载的过程，打开速度更快。 看似很美好的设计，但有两个问题...
-
35
TCP分包、合包的场景 TCP通信是流式的，在发送一个大数据包时，可能会被拆分成多个数据包进行发送，同时，多次发送数据包，也可能会被底层合并成一个数据包进行发送。 分包：接收一个数据包，需要对数据包进行拆分...
-
15
webpack分包及异步加载套路 ...
-
13
Hello there! I've just finished optimizing my last commercial project, and now, I want to share what I've learned. So, I've decided to start a series of articles. In this article, I want to share with you knowledge about webpack's opt...
-
7
Taro3 项目分包实践 京东购物小程序作为京东小程序业务流量的主要入口，承载着许多的活动和页面，而很多的活动在小程序开展的同时，也会在京东 APP 端进行同步的 H5 端页面的投放。这时候，一个相同的活动，需要同时开发原生小程序页面和H5页面...
-
5
文章首发个人博客: 高先生的博客
-
5
MPX是滴滴出品的一款增强型小程序跨端框架，其核心是对原生小程序功能的增强。具体的使用不是本文讨论的范畴，想了解更多可以去官网了解更多。 回到正题，使用MPX开发小程序有一段时间了，该框架...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK