Next.js的Babel及拆包优化

新能源李陈更 發表於 2022-3-21 10:59:00

<div class="lake-content">
<h2 id="62cea749">1 Babel兼容</h2>
 
<h3 id="2d5cc7fa">1.2 Babel按需加载规则（useBuiltIns）</h3>
 
在Babel>7的条件下，支持通过useBuiltIns参数来实现按需加载必要的垫片。
 
<h4 id="74d51104">useBuiltIns=false</h4>
 
不会自动引入垫片。
 
<h4 id="7c0d3353">useBuiltIns=entry</h4>
 
通过<code class="ne-code">@babel/preset-env</code>插件，按照浏览器环境按需加载需要的模块来替换对<code class="ne-code">core-js</code>的直接引用。
 
<div class="ne-quote">
该方式会以浏览器环境配置为准，全量引入最低浏览器所需要的所有垫片。
</div>
 
例如输入源码为：
 
<pre class="ne-codeblock language-plain" data-language="plain">import "core-js/stable";
import "regenerator-runtime/runtime";</pre>
 
再Chrome72中，上面代码会被<code class="ne-code">@babel/preset-env</code>输出为：
 
<pre class="ne-codeblock language-plain" data-language="plain">import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/web.immediate";</pre>
 
<h4 id="7d671158">useBuiltIns=usage</h4>
 
该方式会根据不支持的浏览器环境且根据扫描到的代码中需要的垫片，自动引入不支持的模块。
 
例如输入为：
 
<pre class="ne-codeblock language-plain" data-language="plain">const set = new Set();
.includes(2);</pre>
 
再IE11中会替换为：
 
<pre class="ne-codeblock language-plain" data-language="plain">import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.set";

const set = new Set();
.includes(2);</pre>
 
<h3 id="6e7198c4">1.2 浏览器环境配置</h3>
 
Babel是根据browserslist来配置浏览器环境的。
 
browserslist的查询规则如下：
 
<ol class="ne-ol">
<li id="ub6d01301"><code class="ne-code">browserslist</code> key in <code class="ne-code">package.json</code> file in current or parent directories. We recommend this way.</li>
<li id="uc08485e4"><code class="ne-code">.browserslistrc</code> config file in current or parent directories.</li>
<li id="u95d7bdd0"><code class="ne-code">browserslist</code> config file in current or parent directories.</li>
<li id="u2295cc62"><code class="ne-code">BROWSERSLIST</code> environment variable.</li>
<li id="u6f022d09">If the above methods did not produce a valid result Browserslist will use defaults: <code class="ne-code">> 0.5%, last 2 versions, Firefox ESR, not dead</code>.</li>

</ol>
 
<h3 id="c9584509">1.3 Next默认配置</h3>
 
看了Next.js(8.1.0)的源码，没有找到浏览器兼容的配置，所以可以认为是默认使用了规则 <code class="ne-code">> 0.5%, last 2 versions, Firefox ESR, not dead</code>. 而且Babel配置为<code class="ne-code">useBuiltIns: false</code>
 
<h3 id="3dfca923">1.4 优化</h3>
 
根据Next.js文档对于Babel的描述：
 
<ol class="ne-ol">
<li id="u012d6453">可以通过<code class="ne-code">.babelrc</code>来配置</li>
<li id="uf3536ea8">可以通过配置<code class="ne-code">next/babel</code>的参数来进行配置</li>
<li id="uf8a629f2">Next.js8.1.0对应的依赖为:<code class="ne-code">"@babel/core": "7.1.2"</code>，<code class="ne-code">"webpack": "4.29.0"</code>，<code class="ne-code">"@babel/runtime-corejs2": "7.1.2"</code></li>
<li id="udcf4110f">The modules option on <code class="ne-code">"preset-env"</code> should be kept to <code class="ne-code">false</code> otherwise webpack code splitting is disabled.</li>

</ol>
 
<h4 id="5d3bfbce">1.4.1 优化策略v1</h4>
 
通过对比useBuiltIns的选项，可以发现useBuiltIns=usage是最优的方案，它可以真正只加载我们需要的垫片。
 
<code class="ne-code">.babelrc</code>:
 
<pre class="ne-codeblock language-plain" data-language="plain">{
"presets": [
[
 "next/babel",
 {
 "preset-env": {
 "useBuiltIns": "usage",
 "modules": false,
 "debug": true,
 },
 }
]
]
...
}</pre>
 
<code class="ne-code">.browserslistrc</code>: 为什么是 > 0.25%?
 
其他情况按照具体业务来配置，原则当然是版本越高越好。
 
<pre class="ne-codeblock language-plain" data-language="plain">> 0.25%
last 4 versions
ie 8-11
Android >=4.4
iOS >= 8.4
Firefox > 20</pre>
 
<h4 id="debb4552">1.4.2 优化策略v2</h4>
 
<div class="ne-quote">
没有银弹🙁
</div>
 
上面配置完，基本上我们源码里面的垫片都能自动挂上了。但是....，在IE9/Android 4.4/iOS8上还是会报错。 Set/Map，找不到，数组没有includes等。
 
这是因为：
 
<ol class="ne-ol">
<li id="uac49a97c">只有Webpack通过Babel的目录才会处理</li>
<li id="u40e585bc">如果使用<code class="ne-code">useBuiltIns=usage</code>，Babel 默认会假设处理的文件使用的是ES modules规范，也就是使用(import和export)语法。node_modules里面的第三方库一般都是以CommonJS的规范发布的。</li>

</ol>
 
所以因为React位于node_modules中，而且react发布版本已经变成了CommonJS的规范。所以需要真正的适配node_modules里面的所有模块还需要进一步配置。例如下面这个配置，但是实际上，node_modules的发布风格百花齐放，按照下面这个链接配置完之后会有各种问题。
 
how-do-i-use-babels-usebuiltins-usage-option-on-the-vendors-bundle
 
对比过网上为了解决第三方库中的垫片问题，基本上有三种方式：
 
<ol class="ne-ol">
<li id="ude1510c9">最简单的就是使用<code class="ne-code">useBuiltIns=entry</code>，根据当前的需要支持的浏览器环境，全局导入所有垫片。</li>
<li id="u5770fea0">为第三方库单独添加全局垫片，一般第三方库会说明需要什么垫片，例如React JavaScript Environment Requirements</li>
<li id="u20f4e8b0">使用垫片服务,polyfill.io，会自动根据当前浏览器的UA自动添加缺失的功能，缺点就是代码不需要的也会加上。这种方案属于方案1的优化版。</li>

</ol>
 
综合下来，目前使用了方案2。
 
在<code class="ne-code">next.config.js</code>中的<code class="ne-code">webpack</code>加入：
 
<pre class="ne-codeblock language-plain" data-language="plain">config.entry = async () => {
const entries = await originalEntry();
if (entries['main.js']) {
entries['main.js'].unshift('./static/js/polyfills-legacy.js');
}
return entries;
};</pre>
 
<code class="ne-code">static/js/polyfills-legacy.js</code>：
 
<pre class="ne-codeblock language-plain" data-language="plain">// React
import 'core-js/es6/map';
import 'core-js/es6/set';
// Next.js
import 'core-js/fn/string/starts-with';</pre>
 
<h3 id="2d6347ef">1.5 小结</h3>
 
<ol class="ne-ol">
<li id="u651320a3">通过配置<code class="ne-code">.babelrc</code>文件中的<code class="ne-code">preset-env</code>给业务代码自动加上垫片</li>
<li id="udb8e0c9b">通过全局垫片<code class="ne-code">polyfills-legacy.js</code>按照实际业务需要补上<code class="ne-code">node_modules</code>中模块的垫片。</li>
</ol>
 
<h2 id="e2626ed5">2 Webpack打包优化</h2>
 
<h3 id="4545c35b">2.1 目前打包分析</h3>
 
以insure页面为例，nextjs对应的资源有：
 
<ol class="ne-ol">
<li id="u8f38f35e"><code class="ne-code">https://res.qixin18.com/v3/h5/_next/static/RRt1cbeJiwK-C3QWNcKTC/pages/product/insure.js</code>(547.82 KB)</li>
<li id="u906db09e"><code class="ne-code">https://res.qixin18.com/v3/h5/_next/static/RRt1cbeJiwK-C3QWNcKTC/pages/_app.js</code> (341.34 KB)</li>
<li id="u32eba987"><code class="ne-code">https://res.qixin18.com/v3/h5/_next/static/chunks/commons.e06dbd81189492fbc49d.js</code>  (205.13 KB)</li>
<li id="u17ce6a16"><code class="ne-code">https://res.qixin18.com/v3/h5/_next/static/runtime/main-17f8ae1732f73a182272.js</code> (63.6 KB)</li>

</ol>
<img width="960" id="u104af25a" class="ne-image lazyload" data-src="https://cdn.nlark.com/yuque/0/2021/png/371248/1620704096404-26e49cac-3380-4548-a934-9fe9d3428f21.png">
 
从上图可以看出存在大量重复的包引用
 
<h4 id="61034a81">2.1.1 main.js</h4>
<img width="962" id="u57602ee8" class="ne-image lazyload" data-src="https://cdn.nlark.com/yuque/0/2021/png/371248/1620704113076-aa310552-245d-4476-860f-217e4f6f978a.png">
 
main.js 主要是Next.js核心。 从上图可以看出包含了：
 
<ul class="ne-ul">
<li id="ua632ba03">垫片（core-js/@babel/runtime-core2）</li>
<li id="udf480752">Next核心(next-server/next)</li>
<li id="u12cab68e">工具类（url/querystring/unfetch.mjs）</li>

</ul>
 
<h4 id="e78f2a37">2.1.2 _app.js</h4>
<img width="837" id="u4f49ae27" class="ne-image lazyload" data-src="https://cdn.nlark.com/yuque/0/2021/png/371248/1620704137662-6428eac0-6921-40ed-8b85-c4f813be010e.png">
 
app.js 主要是对应业务代码中的app.js文件 从上图可以看出包含了：
 
<ul class="ne-ul">
<li id="u5796e9d2">垫片（core-js/@babel/runtime-core2）</li>
<li id="u368a6b9f">Redux(<code class="ne-code">pages/*/store</code>)</li>
<li id="u1306d2d8">工具类（immutable.js/moment.js/loadash/axios/antd/exif.js...）</li>

</ul>
 
<h4 id="cabd4d1d">2.1.3 commons.js</h4>
<img width="809.5" id="u92694416" class="ne-image lazyload" data-src="https://cdn.nlark.com/yuque/0/2021/png/371248/1620704162941-0cd80d4d-e168-411e-858d-3d3782eda49b.png">
commons.js主要是公用的库 从上图可以看出包含了：
 
<ul class="ne-ul">
<li id="u7a0c0f58">垫片（core-js/@babel/runtime-core2）</li>
<li id="u5ae00017">react</li>
<li id="u0472ea2e">antd</li>

</ul>
 
<h4 id="368323f0">2.1.4 insure.js</h4>
<img width="933.5" id="u87d50ee1" class="ne-image lazyload" data-src="https://cdn.nlark.com/yuque/0/2021/png/371248/1620704183078-7290e97d-ae94-4181-8dc6-b06f26e81468.png">
 
insure.js主要页面的业务代码 从上图可以看出包含了：
 
<ul class="ne-ul">
<li id="uecb2ebab">垫片（core-js/@babel/runtime-core2）</li>
<li id="u0899fb50">antd</li>
<li id="ufa471b67">工具类（moment.js/immutable.js/redux）</li>
<li id="u56eac0ac">业务代码</li>

</ul>
 
<h3 id="eca2dfcf">2.2 Webpack SplitChunksPlugin</h3>
 
Webpack SplitChunksPlugin默认打包策略
 
<ul class="ne-ul">
<li id="uacb435c8">New chunk can be shared OR modules are from the node_modules folder</li>
<li id="u4e15280e">New chunk would be bigger than 30kb (before min+gz)</li>
<li id="u53ca7e66">Maximum number of parallel requests when loading chunks on demand would be lower or equal to 5</li>
<li id="u8ee9751b">Maximum number of parallel requests at initial page load would be lower or equal to 3</li>

</ul>
 
<pre class="ne-codeblock language-plain" data-language="plain">module.exports = {
//...
optimization: {
splitChunks: {
 chunks: 'async',
 minSize: 30000,
 maxSize: 0,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 automaticNameDelimiter: '~',
 automaticNameMaxLength: 30,
 name: true,
 cacheGroups: {
 vendors: {
 test: /[\\/]node_modules[\\/]/,
 priority: -10
 },
 default: {
 minChunks: 2,
 priority: -20,
 reuseExistingChunk: true
 }
 }
}
}};</pre>
 
<h3 id="8109428e">2.3 客户端默认打包策略</h3>
 
<pre class="ne-codeblock language-plain" data-language="plain">if (!isServer) {
const cacheGroups = config.optimization.splitChunks;
console.log(cacheGroups);
}

// 默认值：
splitChunks {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
commons: { name: 'commons', chunks: 'all', minChunks: 78.5 },
react: {
 name: 'commons',
 chunks: 'all',
 test: /[\\\/]node_modules[\\\/](react|react-dom)[\\\/]/
},
styles: { name: 'styles', test: /\.+(css)$/, chunks: 'all', enforce: true }
}
}</pre>
 
<div class="ne-quote">
splitChunks.chunks: 'all'
</div>
 
定义如何根据<code class="ne-code">静态引用</code>和<code class="ne-code">动态引用</code>来<code class="ne-code">复用模块</code>。详情看上面的链接，配置为<code class="ne-code">all</code>表示使用最优策略来复用模块。
 
<div class="ne-quote">
splitChunks.cacheGroups.default: false
</div>
 
把Webpack中的默认<code class="ne-code">splitChunks.cacheGroups.default</code>禁用。
 
<div class="ne-quote">
splitChunks.cacheGroups.vendors: false
</div>
 
把Webpack中的默认<code class="ne-code">splitChunks.cacheGroups.vendors</code>禁用。
 
<div class="ne-quote">
splitChunks.cacheGroups.commons
</div>
 
配置<code class="ne-code">commons</code>缓存组，包名为<code class="ne-code">commons</code>，
 
<pre class="ne-codeblock language-plain" data-language="plain">splitChunks.cacheGroups.commons.minChunks = totalPages > 2 ? totalPages * 0.5 : 2</pre>
 
这里表示当一个模块被一半以上的页面引用的时候，打包到<code class="ne-code">common.js</code>中，否则待在单独页面的包中。
 
<div class="ne-quote">
splitChunks.cacheGroups.react
</div>
 
这里的配置是把所有的React打包在common.js中。
 
<h3 id="4fbba82c">2.4 优化思路</h3>
 
从2.1中可以知道，大部分重复的包在于Moment.js/Core.js/exif.js/immutable.js/redux.js等。
 
<div class="ne-quote">
思路一：所有在node_module中的包都打包在common.js中
</div>
 
有点，简单粗暴，但是无法控制真正的按需加载，有可能一个node_modules中的一个小模块只被一个页面引用，实际上也会加载到commons.js中，这样导致很浪费流量。这也是为什么在默认的Next.js中，使用只有一半以上页面引用才会放到commons.js中的原因。
 
<div class="ne-quote">
思路二：按照实际情况做配置。
</div>
 
<ol class="ne-ol">
<li id="ue50c0fb4">core.js/redux.js/immutable.js等基础库放到一个组<code class="ne-code">main.js</code>。</li>
<li id="u6916f751">工具类，moment.js/axios.js等工具类放到一个组<code class="ne-code">vendors.js</code>。</li>
<li id="uc5b12a44">其他的包保留默认策略，只有一半以上的页面引用才打包的<code class="ne-code">commons.js</code>。</li>
</ol>
 
最终代码如下：
 
<pre class="ne-codeblock language-plain" data-language="plain">if (!isServer) {
 const cacheGroups = config.optimization.splitChunks.cacheGroups;

 delete cacheGroups.react;

 cacheGroups.default = false;
 // 1.基础库和next.js的基础main放到一起：next-server
 cacheGroups.main = {
 name: 'main',
 test: /[\\/]node_modules[\\/](next-server|next|core-js|regenerator-runtime|@babel)[\\/]/,
 enforce: true,
 chunks: 'all',
 priority: 20,
 };
 // 1.基础库和next.js的基础main放到一起：react
 cacheGroups.react = {
 name: 'main',
 test: /[\\/]node_modules[\\/](react|react-dom|react-redux|redux|immutable|redux-immutable)[\\/]/,
 enforce: true,
 chunks: 'all',
 priority: 20,
 };
 // 2.工具类
 cacheGroups.vendors = {
 name: 'vendors',
 test: /[\\/]node_modules[\\/](axios|lodash|moment)[\\/]/,
 enforce: true,
 chunks: 'all',
 priority: 20,
 };

 // 3. 其他的包保留默认策略，只有一半以上的页面引用才打包的commons.js。
 // commons: { name: 'commons', chunks: 'all', minChunks: 78.5 },
}</pre>
 
另外一些没用的包已经清理掉：<code class="ne-code">exif-js</code>
 
<h3 id="6a3833d1">2.5 优化结果</h3>
 
大小是<code class="ne-code">Parsed size</code>
<table id="975fe128" class="ne-table">
<tbody>
<tr>
<td width="150">
文件名称
</td>
<td width="150">
优化前
</td>
<td width="150">
优化后
</td>
<td width="150">
变化
</td>
<td width="150">
优化百分比
</td>
</tr>
<tr>
<td width="150">
<code class="ne-code">insure.js</code>
</td>
<td width="150">
547.82 KB
</td>
<td width="150">
364.25 KB
</td>
<td width="150">
<code class="ne-code">-183.57‬ KB</code>
</td>
<td width="150"> </td>
</tr>
<tr>
<td width="150">
<code class="ne-code">_app.js</code>
</td>
<td width="150">
341.34 KB
</td>
<td width="150">
152.6 KB
</td>
<td width="150">
<code class="ne-code">-188.74‬ KB</code>
</td>
<td width="150"> </td>
</tr>
<tr>
<td width="150">
<code class="ne-code">commons.js</code>
</td>
<td width="150">
205.13 KB
</td>
<td width="150">
0
</td>
<td width="150">
<code class="ne-code">-205.13 KB</code>
</td>
<td width="150"> </td>
</tr>
<tr>
<td width="150">
<code class="ne-code">main.js</code>
</td>
<td width="150">
63.6 KB
</td>
<td width="150">
311.43 KB
</td>
<td width="150">
<code class="ne-code">+247.83 KB</code>
</td>
<td width="150"> </td>
</tr>
<tr>
<td width="150">
<code class="ne-code">vendors.js</code>
</td>
<td width="150">
0
</td>
<td width="150">
103.17 KB
</td>
<td width="150">
<code class="ne-code">+103.17 KB</code>
</td>
<td width="150"> </td>
</tr>
<tr>
<td width="150">
<code class="ne-code">insure页面</code>
</td>
<td width="150">
1,157.89 KB
</td>
<td width="150">
931.45 KB
</td>
<td width="150">
<code class="ne-code">-226.44 KB</code>
</td>
<td width="150">
<code class="ne-code">-19.55 %</code>
</td>
</tr>
<tr>
<td width="150">
<code class="ne-code">全部</code>
</td>
<td width="150">
20.61 MB
</td>
<td width="150">
12.39 MB
</td>
<td width="150">
<code class="ne-code">-8.22‬ MB</code>
</td>
<td width="150">
<code class="ne-code">-39.88 %</code>
</td>
</tr>
</tbody>
</table>
 
前后Webpack Bundle Analyzer文件：
 
优化前:
 
Webpack-Bundle-Analyzer-client.html
 
优化后：
 
Webpack-Bundle-Analyzer-client-optimization
 
<h3 id="708cce37">2.6 小结</h3>
 
从Next.js的源码可以看出，Next.js对于拆包这块做得还是很粗糙的。
 
<div class="ne-quote">
优化策略：
</div>
 
<ol class="ne-ol">
<li id="ufd4de1f9">对于基础包，包括<code class="ne-code">Next.js</code>、<code class="ne-code">babel</code>、<code class="ne-code">React.js相关包</code>放到<code class="ne-code">main.js</code>中，这一层应该包含<code class="ne-code">几乎所有页面都共用的包</code>。</li>
<li id="u5dfd7e1e">对于工具包，包括<code class="ne-code">moment.js</code>、<code class="ne-code">lodash</code>、<code class="ne-code">axios</code>等放到<code class="ne-code">vendor.js</code>中，这一层应该包含<code class="ne-code">大部分页面都公用的包</code>。</li>
<li id="u57133908">其他情况公用的代码，包括node_modules中的和业务中的，放到<code class="ne-code">common.js</code>中，这一层应该包含了<code class="ne-code">一半页面用到的公用包</code>。</li>
</ol>
 
<div class="ne-quote">
从上面的策略可以看出，各个层次之间其实没有严格的区分，更多是根据项目的实际情况来决定，另外有一些思考：
</div>
 
<ol class="ne-ol">
<li id="u624d06d9">实际上拆包不仅要从单个页面去看，还要从整个项目去看，例如有些小页面不需要依赖太多的外部包，但是很多外部包又打包在<code class="ne-code">main.js</code>等基础包中，会影响原来的单个页面的效率。</li>
<li id="ub761bccf">另外不仅要从node_modules去看，还要从业务代码去看，目前业务代码的打包策略是<code class="ne-code">只有一半以上的页面引用才打包的commons.js</code>，这只是大概的优化策略，如果想要做到更好，更精细的效果，还需要从实际业务出发去拆包。</li>
<li id="u64843083">最后还需要考虑文件大小和包大小之间的平衡。</li>
</ol></div> 
来源：https://www.cnblogs.com/whw666/p/16033765.html

頁: [1]

琼殿技术论坛's Archiver

Next.js的Babel及拆包优化