优化Next的webpack配置

众所周知，next的webpack打包实际上分成了两个部分，一个是服务器端、一个是客户端，我们这里的配置主要是针对客户端的配置。
目的在于降低_app.js包大小，合理划分基础包、工具包、常用方法包、拆分lodash按需引入效果。

拆分lodash包

不知道大家有没有遇到过跟我们一样的问题：lodash已经配置了按需引入，但是打包出来却没有实现，还是一整个包引入的。排查了一段时间，才想明白：是因为客户端的代码中引用了server文件的一个config，那个config里又使用了lodash，导致依赖索引到服务端去了，无法解析那边使用的cjs模块处理，造成了这个问题。
修改方案：将那个config放到客户端的src文件夹下，不要从服务端的文件夹去引入。

babel配置如下：

1. 配置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,};