众所周知，next的webpack打包实际上分成了两个部分，一个是服务器端、一个是客户端，我们这里的配置主要是针对客户端的配置。

目的在于降低_app.js包大小，合理划分基础包、工具包、常用方法包、拆分lodash按需引入效果。

拆分lodash包

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

修改方案：将那个config放到客户端的src文件夹下，不要从服务端的文件夹去引入。

babel配置如下：

配置babel转换路径为对应方法具体路径。（使用<code>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等

<code> 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,

};