游戏网站建设毕业论文seo博客大全
众所周知，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. base：next / 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,};