如何为next.js启用摇树?

Question

是否有一些东西可以使next.js从依赖项中执行摇树/移除死代码?我导出了两个对象，像这样:

library.js

export const foo = {foo:"foo"}
export const bar = {bar:"bar"}

在我的下一个。js应用中，我这样做:

page.tsx

import { foo } from 'library';
console.log(foo);

所以现在我希望生产构建将而不是包括bar，确实有些事情似乎是正确的，因为这一行产生:

.next/server/chunks/621.js

/* unused harmony exports bar */

但令人困惑的是，当我在浏览器中加载应用程序时，网络流量显示未使用的导出是包括:

http://localhost:3001/_next/static/chunks/pages/page-0b2b13a7513f2849d855.js

(self.webpackChunk_N_E = self.webpackChunk_N_E || []).push([[3031], {
80621: function(e, r, n) {
"use strict";
...
const l = a.object({
foo: "foo"
});
a.object({
bar: "bar"
});
},

为什么构建识别未使用的导出，但不从传输到浏览器的有效负载中删除它们?是否有Next希望我们启用的设置?某种后处理实际上是修剪未使用的出口?

Answer 1

我相信你的例子的问题是，Next.js能够树摇原始值(布尔值，字符串，int，…)和对象/数组的原始值。

然而，webpack，在Next.js中使用的打包器，不能识别一个函数调用是否有没有副作用

从这个Github问题#12557中，一些用户报告在package.json中设置"sideEffects:false，甚至在next.config.js中修改webpack都解决了这个问题。

这些都不适合我。相反，使用/*#__PURE__*/注释将函数标记为无副作用是有效的。

的例子:

const createApi = (message) => {
console.log(message);
return () =>{}
}
export const serverApi = /*#__PURE__*/ createApi("I should only be available server side.")
export const clientApi = /*#__PURE__*/ createApi("I should only be available client side.")

像上面这样写代码可以防止serverApi被包含在客户端包中。

应该注意，注释的语法是/*#__PURE__*/ fn()。其他所有用法都不起作用