网站如何设置长尾词,应用公园怎样收费,ppt模板下载后怎么导入,淘宝客怎么做推广众所周知#xff0c;next的webpack打包实际上分成了两个部分#xff0c;一个是服务器端、一个是客户端#xff0c;我们这里的配置主要是针对客户端的配置。 目的在于降低_app.js包大小#xff0c;合理划分基础包、工具包、常用方法包、拆分lodash按需引入效果。
拆分lodas…众所周知next的webpack打包实际上分成了两个部分一个是服务器端、一个是客户端我们这里的配置主要是针对客户端的配置。 目的在于降低_app.js包大小合理划分基础包、工具包、常用方法包、拆分lodash按需引入效果。
拆分lodash包
不知道大家有没有遇到过跟我们一样的问题lodash已经配置了按需引入但是打包出来却没有实现还是一整个包引入的。排查了一段时间才想明白是因为客户端的代码中引用了server文件的一个config那个config里又使用了lodash导致依赖索引到服务端去了无法解析那边使用的cjs模块处理造成了这个问题。 修改方案将那个config放到客户端的src文件夹下不要从服务端的文件夹去引入。
babel配置如下
配置babel转换路径为对应方法具体路径。使用babel-import-plugin [import,{libraryName: lodash,libraryDirectory: ,//表示从库的package.json的main入口否则默认为lib文件夹camel2DashComponentName: false // default: true将引入的组件名转化为-连接的文件名}],babel-plugin-lodash lodash-webpack-plugin
babel-import-plugin和babel-plugin-lodash效果相同都能实现按需引入的功能但是babel-plugin-lodash可能会有一些更针对性的优化比如摇树之类的。
实际使用和比较中发现使用与否的打包效果并没有区别。因此考虑了一下最终决定继续使用babel-plugin-import进行按需引入不使用babel-plugin-lodash。
网上很多是推荐babel-plugin-lodash lodash-webpack-plugin配合一起使用。
但是在实际使用中发现lodash-webpack-plugin会对模块做一些替换操作导致莫名异常找不到方法 / 参数不对。考虑到babel-plugin就已经可以达到效果了引入webpack-plugin可能会引起其他风险因此不考虑使用这个插件。 参考 https://github.com/lodash/lodash-webpack-plugin https://juejin.cn/post/7207678459270610999 降低_app.js包大小
合理划分基础包、工具包、公用方法包
根据一些查找的参考建议包大小压缩后低于200k为宜比如next在页面大小大于128kB时会提出建议那样。包的大小太大占用带宽TTB下降限制太小数量变多也会造成并发请求数量上升反而造成阻塞尤其是移动端机型上。
综上一些配置的参数做如下考虑maxSize为500000压缩后每个包大小大约在100k左右。参考cacheGroups默认配置中framework / main的priority都是40设置priority值为40。
当然其实要做到一个很完美的拆分方案是几乎不可能的JS包中的很多看似冗余的代码其实还牵扯到其他页面、或者项目整体的运行所以我们只能找到一个尽量的平衡点 参考https://blog.csdn.net/qq_33198051/article/details/123629823 疑惑点 其实这里我有一个很大的疑惑点关于node_modules的依赖配置不生效的问题。 我遇到的问题本地的打包构建产物和线上不同 比如本地已经拆分了mobx、antd依赖到单独的包本地分析中已经完全清理线上却仍然存在于_app.js包中。 如果去除单独打包的cacheGroup规则本地和线上的antd打包大小是一致的。 问题在于为什么配置会不生效。 1. basenext / babel等 cacheGroups.base {name: base,test: /[\\/]node_modules[\\/](next|next-server|babel)/,enforce: true,chunks: all,priority: 40,};2. Mobx依赖包和mobxStore一起拆分出去。 cacheGroups.mobx {name: mobx,test: /[\\/]node_modules[\\/](mobx|mobx-react|mobx-react-lite|mobx[\\/]dist)[\\/]|[\\/]src[\\/]mobx[\\/]/,enforce: true,// maxSize: 500000,chunks: all,priority: 40,};3. antd
antd已经做了按需引入如果不单独拆分在_app中占用的大小为antd-50K左右ant-design-30K左右 cacheGroups.antd {name: antd,test: /[\\/]node_modules[\\/](antd|ant-design)[\\/]/,enforce: true,maxSize: 500000,chunks: all,priority: 40,};4. 通用依赖工具包 cacheGroups.vendors {name: vendors,test: /[\\/]node_modules[\\/](axios|validator|ahooks|lodash)[\\/]/,enforce: true,chunks: all,maxSize: 500000,priority: 40,};5. utils工具 cacheGroups.utils {name: utils,test: /[\\/]src[\\/]utils[\\/]/,enforce: true,chunks: all,maxSize: 400000,priority: 40,};6. 公共方法包、通用的业务代码之类的
当一个模块被20个页面同时引用的时候打包到common.js中否则待在单独页面的包中 cacheGroups.commons {name: commons,enforce: true,chunks: all,maxSize: 500000,minChunks: 20,priority: 50,};
