CODEWITHSUNDEEP
next.jswebpacktree-shaking
neeko
neeko

Reputation: 2000

Webpack not tree shaking unused import

Webpack is not treeshaking this unused import when creating a production build in my next.js app.

I have marked sideEffects: false in @shared/graphql.mock package.json

file:

import { MockData } from '@shared/graphql.mock'

const should = (
  fn,
) => {
  if (process.env.NODE_ENV !== 'production') {
    return fn
  }
}

/*#__PURE__*/ const mockData = should(() => MockData)()

webpack output:

const should = (fn)=>{
    if (false) {}
};

/*#__PURE__*/ const mockData = should(() => _shared_graphql_mock_DATA__WEBPACK_IMPORTED_MODULE_2__.N[0])();

Added example repo here: https://codesandbox.io/p/devbox/turborepo-template-forked-qzgpmn?file=%2Fapps%2Fweb%2F.next%2Fserver%2Fpages%2Fapi%2Ftest.js%3A81%2C1-95%2C1&welcome=true

See: packages/server/server.ts apps/web/pages/api/test.ts

Output: apps/web/.next/server/pages/api/test.js

Upvotes: 0

Views: 62

Answers (1)

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38982

The annotation for the terser should be place before the statement to mark the function call as side effect free.

const mockData = /*#__PURE__*/ should(() => _shared_graphql_mock_DATA__WEBPACK_IMPORTED_MODULE_2__.N[0])();

The reason for webpack not dropping unused functions in your build is because the minimize option is disabled. You have to enable webpack to use the terser plugin.

Refer to the unused option in the compression options section for the minimizer that facilitates this.

In next.config.js,

module.exports = {
  reactStrictMode: true,
  transpilePackages: ["ui"],
  webpack: (config) => {
    // config.optimization.minimize = false;
    return config;
  },
};

Upvotes: 1

Related Questions