fix: reduce MUI size by using `@swc/plugin-transform-imports` #169

pionxzh · 2023-01-15T05:42:09Z

This PR introduced @swc/plugin-transform-imports to minimize the bundle size of MUI.

It will transform the import statement into path import to reduce the amount of modules being pulled in.

import { Box, SvgIcon } from '@mui/material'
->
import Box from '@mui/material/Box'
import SvgIcon from '@mui/material/SvgIcon'

netlify · 2023-01-15T05:42:12Z

✅ Deploy Preview for any-viewer ready!

Name	Link
🔨 Latest commit	`d0df190`
🔍 Latest deploy log	https://app.netlify.com/sites/any-viewer/deploys/63cf8f5c3c22310008097b40
😎 Deploy Preview	https://deploy-preview-169--any-viewer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

codecov · 2023-01-15T05:44:32Z

Codecov Report

Base: 87.40% // Head: 87.39% // Decreases project coverage by -0.02% ⚠️

Coverage data is based on head (d0df190) compared to base (7884a29).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #169      +/-   ##
==========================================
- Coverage   87.40%   87.39%   -0.02%     
==========================================
  Files          18       18              
  Lines        1969     1967       -2     
  Branches      349      349              
==========================================
- Hits         1721     1719       -2     
  Misses        248      248

Impacted Files	Coverage Δ
src/index.tsx	`98.77% <100.00%> (-0.02%)`	⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

anthonyalayo · 2023-01-15T05:44:59Z

@pionxzh does it work in the case of SvgIconProps?

When I attempted the manual solution, I found that it wasn't default exported:
https://github.com/TexteaInc/json-viewer/pull/168/files#diff-7b4c75ec5a31f1d14ac9b3ecd0cb10585aeff284cf0b2d82bdc3b5aa62997b86R1

Here's the reference on github:
https://github.com/mui/material-ui/blob/master/packages/mui-material/src/SvgIcon/SvgIcon.d.ts#L101

pionxzh · 2023-01-15T05:56:49Z

@pionxzh does it work in the case of SvgIconProps?

When I attempted the manual solution, I found that it wasn't default exported: https://github.com/TexteaInc/json-viewer/pull/168/files#diff-7b4c75ec5a31f1d14ac9b3ecd0cb10585aeff284cf0b2d82bdc3b5aa62997b86R1

Lol. I manually copied and modified the import as an example. You are right.
Don't worry, it's just a type. I will add an ESLint rule to change it.

pionxzh · 2023-01-15T06:45:54Z

@anthonyalayo do you mind doing testing on this version? That would be helpful 🙏

anthonyalayo · 2023-01-15T07:35:38Z

@pionxzh tested -- unfortunately due to the lack of consistency within @mui/material, this solution doesn't work. 😕

../json-viewer/dist/index.mjs:3:0 Module not found: Can't resolve '@mui/material/createTheme'
../json-viewer/dist/index.mjs:5:0 Module not found: Can't resolve '@mui/material/ThemeProvider'
../json-viewer/dist/index.mjs:8:0 Module not found: Can't resolve '@mui/material/styled'

It was the same issue I hit when I did it manually here.

I found an open PR on @mui/material for updating the docs, where they also realized this and decided that they weren't going to fix it: mui/material-ui#35457 (comment)

I'm searching for some tweaks that could make this work.

pionxzh · 2023-01-15T07:48:56Z

@anthonyalayo Thanks. Wow I didn't expect that 😢
I will see how their babel plugin works. They should be similar :/

anthonyalayo · 2023-01-15T12:00:46Z

@pionxzh , I think I understand the entire picture now.

First of all, here's the fix to make your PR build:

Add these transforms to your rollup.config.ts:

'@mui/material': {
  transform: '@mui/material/{{member}}'
},
'@mui/material/styles': {
  transform: '@mui/material/styles/{{member}}'
},
'@mui/system': {
  transform: '@mui/system/{{member}}'
}

Break out the following imports:

import { styled } from '@mui/material/styles'
import { createTheme } from '@mui/material/styles'
import { ThemeProvider } from '@mui/system'
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'

With that being said, it still ends up pulling other @mui dependencies in during development.

I updated my original PR, #168, with more details about exactly why this is happening and why that fix is working. Let me know what you think @pionxzh @rtritto.

pionxzh · 2023-01-15T15:22:44Z

I basically found out the same result as you did 😄
And I was finding ESLint rules to enforce this kind of pattern.

pionxzh · 2023-01-15T15:50:27Z

closed as in favor of #168

rtritto · 2023-01-15T16:05:20Z

@pionxzh @anthonyalayo Remove use of styled in favor of sx? Are there any differences?

Example:

const IconBox = (props) => <Box {...props} component='span' sx={{
  cursor: 'pointer',
  paddingLeft: '0.7rem'
}} />

pionxzh · 2023-01-15T16:17:32Z

const IconBox = (props) => <Box {...props} component='span' sx={{
  cursor: 'pointer',
  paddingLeft: '0.7rem'
}} />

Good point. It shouldn't bring any difference. And the sx props also provide better IDE hints. This can be another PR.
But we still have createTheme and ThemeProvider.
It will be troublesome to use the unstable transform introduced in this PR. That's why I closed it.

anthonyalayo · 2023-01-16T00:08:11Z

Sounds good, give me a bit, doing a bit more investigation.

Update: I ended up filing an RFC with @mui as there are still a ton of modules that get pulled into webpack, but the solution in #168 is still the best available for now. Going to clean it up.

rtritto · 2023-01-16T09:21:23Z

Should this PR be reopened in draft for the future?

pionxzh · 2023-01-18T16:59:01Z

Should this PR be reopened in draft for the future?

I will reopen when things get right 😄

pionxzh · 2023-01-19T15:44:15Z

TODO: rewrite the rollup config to conditional redirect to esm/cjs.
I will be inactive in the following days for CNY 🙏

anthonyalayo · 2023-01-22T00:44:21Z

@pionxzh ideally we have something like:


const isCJS = process.env.BUILD_FORMAT === 'cjs';

export default {
  input: 'src/index.js',
  output: {
    format: isCJS ? 'cjs' : 'es',
    file: 'dist/index.js'
  },
  plugins: [
    resolve(),
    commonjs(),
    transformImports({
      '@mui/material': {
        default: isCJS ? '@mui/material/cjs' : '@mui/material/esm'
      }
    })
  ]
}

but because your buildMatrix() method takes in format: ModuleFormat[], not sure how to do it

pionxzh · 2023-01-22T04:42:14Z

Yes, so the format array should be refactored to be accpet only one format

anthonyalayo · 2023-01-24T06:58:03Z

@pionxzh , nice fix!

pionxzh · 2023-01-24T06:58:06Z

I have finished the necessary changes.
But I noticed that the size of the docs build remains the same.
Does that mean this effect needs to be verified on Webpack?

anthonyalayo · 2023-01-24T06:59:03Z

@pionxzh that's right, the size of the bundle should remain the same during builds, it's the webpack import bloat that occurs during builds/runs. Let me check the module count

anthonyalayo · 2023-01-24T07:31:05Z

Unfortunately I'm having a bunch of errors and I'm not sure where they are coming from yet @pionxzh.

It's some sort of...mix and match with cjs and esm?

error - Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/anthony.alayo/WebstormProjects/json-viewer/node_modules/@mui/material/Paper' is not supported resolving ES modules imported from /Users/anthony.alayo/WebstormProjects/json-viewer/dist/index.mjs
Did you mean to import @mui/material/node/Paper/index.js?
    at new NodeError (node:internal/errors:400:5)
    at finalizeResolution (node:internal/modules/esm/resolve:319:17)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:842:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/anthony.alayo/WebstormProjects/json-viewer/node_modules/@mui/material/Paper',

pionxzh · 2023-01-24T07:36:00Z

Directory import... Let me rewrite it to index.js 👀

anthonyalayo · 2023-01-24T09:56:48Z

@pionxzh build is working now! But the module count is still high. I re-visited the PR I made for doing the imports manually, check this out:

Left: Manual Paths (my PR)
Middle: Main branch
Right: Auto Paths (this PR)

Notice how the manual paths version barely makes any imports to @mui? I believe there is some optimization step during the build process in rollup that is doing this. The inlining of trivial code is what makes json-viewer much faster.

My first thought - is it possible to do the swc transform imports earlier on in the build process?

pionxzh · 2023-01-24T10:27:50Z

What is the boilerplate you use? I want to test this locally. But none of them shows the count of modules 😞

anthonyalayo · 2023-01-24T17:47:13Z

@pionxzh i'm presently using https://github.com/mantinedev/mantine-next-template

but either npx create-next-app or npx create-react-app will work.
I used create-react-app when I filled the ticket on @mui

pionxzh · 2023-01-25T05:18:04Z

@anthonyalayo This is the result I get with CRA(followed your instruction in the RFC) + npm link
I'm so confused.

latest package

stats assets by path static/ 255 KiB
  asset static/js/main.814c55a0.js 255 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
Entrypoint main 255 KiB = static/css/main.4efb37a3.css 292 bytes static/js/main.814c55a0.js 255 KiB
orphan modules 2.27 MiB (javascript) 997 bytes (runtime) [orphan] 913 modules
runtime modules 2.08 KiB 5 modules
83.93 kB   build\static\js\main.814c55a0.js

main (local build)

stats assets by path static/ 380 KiB
  asset static/js/main.0892ff97.js 380 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
Entrypoint main 380 KiB = static/css/main.4efb37a3.css 292 bytes static/js/main.0892ff97.js 380 KiB
orphan modules 2.26 MiB (javascript) 997 bytes (runtime) [orphan] 922 modules
runtime modules 1.86 KiB 4 modules
124.49 kB  build\static\js\main.0892ff97.js

PR 169 (swc transform)

stats assets by path static/ 380 KiB
  asset static/js/main.48e6680c.js 380 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
Entrypoint main 380 KiB = static/css/main.4efb37a3.css 292 bytes static/js/main.48e6680c.js 380 KiB
orphan modules 962 KiB (javascript) 997 bytes (runtime) [orphan] 446 modules
124.49 kB  build\static\js\main.48e6680c.js

PR 168 (inline path import)

stats assets by path static/ 380 KiB
  asset static/js/main.48e6680c.js 380 KiB [emitted] [immutable] [minimized] (name: main) 1 related asset
Entrypoint main 380 KiB = static/css/main.4efb37a3.css 292 bytes static/js/main.48e6680c.js 380 KiB
orphan modules 965 KiB (javascript) 997 bytes (runtime) [orphan] 448 modules
runtime modules 1.86 KiB 4 modules
124.49 kB  build\static\js\main.48e6680c.js

And, this is the bundled result

Can you get latest on 168 branch and try again?

anthonyalayo · 2023-01-25T09:01:21Z

@pionxzh here's the step by step for CRA:

npx create-react-app json-viewer-test
cd json-viewer-test
npm run eject
open ./config/webpack.config.js
Update the return value on line 189, add the following:

  return {
   ...
    stats: {
      all: false,
      modules: true,
    },
   ...

There's one stats object from the return value of webpack's compile(), and another inside the webpack config, so it's definitely confusing. The former is for big traces, but the latter is for summarized info.

I just followed the steps above with the following CRA app:

import {JsonViewer} from '@textea/json-viewer'

function App() {
    return (
        <div className="App">
            <JsonViewer value={{test: 'ing'}}/>
        </div>
    );
}

export default App;

Then I ran npm run start. Here's the output:

orphan modules 1.73 MiB [orphan] 761 modules
runtime modules 31.8 KiB 17 modules
+ 260 modules

You can see 750+ modules were loaded, but only 17 were actually needed. That's from the latest release of json-viewer.

anthonyalayo · 2023-01-25T09:04:59Z

Can you get latest on 168 branch and try again?

Actually since you mention that, that was something odd. On the branch right now, it isn't inlining the functions / cleaning up the imports. I think one of the other changes broke that desired behavior somehow?

https://github.com/TexteaInc/json-viewer/pull/168/commits

I just re-did the changes locally (manually did the path imports), hit build, and saw that output I pasted above.

pionxzh · 2023-01-26T05:47:59Z

On the branch right now, it isn't inlining the functions / cleaning up the imports. I think one of the other changes broke that desired behavior somehow?

I think you might need this line.
I tried this, and the dist went from 66 KB to ~350 KB. That's why the module counts dropped.

I'm so confused.

npm link-ed build is bigger.
orphan modules count drops the same way in both Don't pull unused @mui modules by using path imports #168 and fix: reduce MUI size by using @swc/plugin-transform-imports #169, but the bundle size is not.
(Actually, if you look closely at the result, you will find that they give 100% same output.)

anthonyalayo · 2023-01-27T00:35:53Z

@pionxzh I agree, you're right. The remaining bloat is coming from @mui/material itself, which I'll address with the open ticket on them. This change looks good to me!

One thing that would be a nice improvement afterwards, is to un-bundle the builds that aren't meant for the browser. Non-browser builds will most likely be pulling this library into their own build process, so bundling ahead of time makes it harder on the user's bundler to tree shake code. For example, if the copy to clipboard feature isn't used, then it may not get imported.

I was following tickets on @tabler/tabler-icons over the same topic:
tabler/tabler-icons#359
tabler/tabler-icons#471

For reference, here's a rendering of a nextjs trace I did with a blank project that just uses json-viewer:

├─ client recompilation (new page discovered) 1.5s
│  ├─ client compilation 1.4s
│  │  ├─ entry next/dist/compiled/@next/react-refresh-utils/dist/runtime.js
│  │  ├─ entry next/dist/client/dev/amp-dev
│  │  ├─ entry next/dist/client/next-dev.js
│  │  ├─ entry next-client-pages-loader?absolutePagePath=private-next-pages%2F_app&page=%2F_app!
│  │  ├─ entry next/dist/client/router.js
│  │  ├─ entry next-client-pages-loader?absolutePagePath=private-next-pages%2F_error&page=%2F_error!
│  │  ├─ entry next-client-pages-loader?absolutePagePath=%2FUsers%2Fanthony.alayo%2Fjson-viewer-test%2Fpages%2Findex.tsx&page=%2F!
│  │  ├─ module /Users/anthony.alayo/WebstormProjects/json-viewer/dist/index.mjs 888 ms (total 998 ms, self 64 ms) [read-resource 257 µs]
│  │  │  ├─ module zustand (zustand/esm/context.mjs) 4.3 ms [read-resource 2.4 ms]
│  │  │  ├─ module zustand (zustand/esm/middleware.mjs) 14 ms [read-resource 4.2 ms]
│  │  │  ├─ module zustand (zustand/esm/index.mjs + 1) 114 ms (total 30 ms, self 27 ms) [read-resource 24 ms]
│  │  │  │  └─ module use-sync-external-store (use-sync-external-store/shim/with-selector.js + 3) 13 ms (self 179 ms) [read-resource 175 ms]
│  │  │  ├─ module @mui/material (@mui/material/Paper/index.js + 4) 24 ms (self 115 ms) [read-resource 112 ms]
│  │  │  ├─ module @mui/material (@mui/material/styles/createTheme.js + 15) 809 ms (total 326 ms, self 216 ms) [read-resource 195 ms]
│  │  │  │  ├─ module @babel/runtime (@babel/runtime/helpers/esm/extends.js) 21 ms [read-resource 21 ms]
│  │  │  │  ├─ module @babel/runtime (@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js) 22 ms [read-resource 21 ms]
│  │  │  │  ├─ module @mui/utils (@mui/utils/esm/index.js + 40) 505 ms (total 96 ms, self 925 ms) [read-resource 906 ms]
│  │  │  │  │  ├─ module @babel/runtime (@babel/runtime/helpers/esm/extends.js) 29 ms [read-resource 29 ms]
│  │  │  │  │  └─ module react-is (react-is/index.js + 1) 39 ms (self 43 ms) [read-resource 42 ms]
│  │  │  │  └─ module @mui/system (@mui/system/esm/index.js + 60) 635 ms (total 165 ms, self 2s) [read-resource 1.9s]
│  │  │  │     ├─ module @mui/styled-engine (@mui/styled-engine/index.js + 4) 175 ms (total 38 ms, self 41 ms) [read-resource 38 ms]
│  │  │  │     │  ├─ module @emotion/react (@emotion/react/dist/emotion-react.browser.esm.js) 8.9 ms [read-resource 6 ms]
│  │  │  │     │  └─ module @emotion/styled (@emotion/styled/dist/emotion-styled.browser.esm.js + 1) 86 ms (total 20 ms, self 27 ms) [read-resource 25 ms]
│  │  │  │     │     └─ module @emotion/is-prop-valid (@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js) 5.2 ms [read-resource 540 µs]
│  │  │  │     ├─ module @babel/runtime (@babel/runtime/helpers/esm/extends.js) 28 ms [read-resource 28 ms]
│  │  │  │     ├─ module @babel/runtime (@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js) 29 ms [read-resource 28 ms]
│  │  │  │     └─ module @mui/private-theming (@mui/private-theming/index.js + 6) 165 ms (total 42 ms, self 132 ms) [read-resource 129 ms]
│  │  │  │        └─ module @babel/runtime (@babel/runtime/helpers/esm/extends.js) 780 µs [read-resource 402 µs]
│  │  │  ├─ module @mui/material (@mui/material/styles/ThemeProvider.js) 24 ms [read-resource 23 ms]
│  │  │  ├─ module @mui/material (@mui/material/Box/index.js + 14) 22 ms (self 449 ms) [read-resource 434 ms]
│  │  │  ├─ module @mui/material (@mui/material/InputBase/index.js + 14) 707 ms (total 123 ms, self 227 ms) [read-resource 213 ms]
│  │  │  │  ├─ module @mui/base (@mui/base/index.js + 140) 555 ms (total 59 ms, self 7.3s) [read-resource 7.2s]
│  │  │  │  │  ├─ module @babel/runtime (@babel/runtime/helpers/esm/extends.js) 7.8 ms [read-resource 7.5 ms]
│  │  │  │  │  ├─ module @babel/runtime (@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js) 7.4 ms [read-resource 7 ms]
│  │  │  │  │  └─ module @popperjs/core (@popperjs/core/lib/index.js + 59) 1.4 ms (self 665 ms) [read-resource 633 ms]
│  │  │  │  ├─ module prop-types (prop-types/index.js + 4) 450 ms (total 29 ms, self 118 ms) [read-resource 111 ms]
│  │  │  │  │  └─ module react-is (react-is/index.js + 1) 12 ms (self 15 ms) [read-resource 13 ms]
│  │  │  │  └─ module clsx (clsx/dist/clsx.m.js) 13 ms [read-resource 12 ms]
│  │  │  ├─ module @mui/material (@mui/material/NoSsr/index.js) 157 ms (total 33 ms, self 22 ms) [read-resource 22 ms]
│  │  │  │  └─ module @mui/base (@mui/base/NoSsr/index.js + 2) 10 ms (self 37 ms) [read-resource 36 ms]
│  │  │  ├─ module @mui/material (@mui/material/SvgIcon/index.js + 2) 23 ms (self 97 ms) [read-resource 92 ms]
│  │  │  ├─ module copy-to-clipboard (copy-to-clipboard/index.js) 143 ms (total 48 ms, self 29 ms) [read-resource 26 ms]
│  │  │  │  └─ module toggle-selection (toggle-selection/index.js) 19 ms [read-resource 18 ms]
│  │  │  └─ module @emotion/react (@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js + 2) 402 ms (total 264 ms, self 54 ms) [read-resource 48 ms]
│  │  │     ├─ module @babel/runtime (@babel/runtime/helpers/esm/extends.js) 9.2 ms [read-resource 8.6 ms]
│  │  │     ├─ module hoist-non-react-statics (hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js) 274 ms (total 28 ms, self 9.7 ms) [read-resource 8.4 ms]
│  │  │     │  └─ module react-is (react-is/index.js + 1) 19 ms (self 60 ms) [read-resource 58 ms]
│  │  │     ├─ module @emotion/cache (@emotion/cache/dist/emotion-cache.browser.esm.js) 227 ms (total 111 ms, self 26 ms) [read-resource 18 ms]
│  │  │     │  ├─ module stylis (stylis/index.js + 7) 27 ms (self 151 ms) [read-resource 140 ms]
│  │  │     │  ├─ module @emotion/memoize (@emotion/memoize/dist/emotion-memoize.esm.js) 28 ms [read-resource 27 ms]
│  │  │     │  └─ module @emotion/sheet (@emotion/sheet/dist/emotion-sheet.browser.esm.js) 30 ms [read-resource 28 ms]
│  │  │     ├─ module @emotion/weak-memoize (@emotion/weak-memoize/dist/emotion-weak-memoize.esm.js) 9.5 ms [read-resource 8.9 ms]
│  │  │     ├─ module @emotion/utils (@emotion/utils/dist/emotion-utils.browser.esm.js) 10 ms [read-resource 9.4 ms]
│  │  │     ├─ module @emotion/serialize (@emotion/serialize/dist/emotion-serialize.browser.esm.js) 270 ms (total 52 ms, self 18 ms) [read-resource 12 ms]
│  │  │     │  ├─ module @emotion/hash (@emotion/hash/dist/emotion-hash.esm.js) 17 ms [read-resource 16 ms]
│  │  │     │  └─ module @emotion/unitless (@emotion/unitless/dist/emotion-unitless.esm.js) 17 ms [read-resource 17 ms]
│  │  │     └─ module @emotion/use-insertion-effect-with-fallbacks (@emotion/use-insertion-effect-with-fallbacks/dist/emotion-use-insertion-effect-with-fallbacks.browser.esm.js) 26 ms [read-resource 26 ms]
│  │  ├─ webpack-compilation-seal 240 ms
│  │  ├─ webpack-compilation-chunk-graph 11 ms
│  │  ├─ webpack-compilation-optimize 992 µs
│  │  ├─ webpack-compilation-optimize-modules 9 µs
│  │  ├─ webpack-compilation-optimize-chunks 216 µs
│  │  ├─ webpack-compilation-optimize-tree 9 µs
│  │  ├─ webpack-compilation-hash 23 ms
│  │  ├─ NextJsBuildManifest-createassets 579 µs
│  │  └─ NextJsBuildManifest-generateClientManifest 272 µs
│  ├─ make 1.2s
│  └─ emit 42 ms

pionxzh · 2023-01-27T02:02:40Z

Nice. The trace in Next.js looks quite clean.

For the un-bundle, it's a good suggestion. Thank.

…TexteaInc#169)" This reverts commit f5739d6.

…#169)" This reverts commit f5739d6.

* fix: reduce MUI size by using `@swc/plugin-transform-imports` * style: apply ESLint rules to enforce correct import path * fix: fix eslint error message * fix: add rule for `@mui/material/styles` * ci: rewrite MUI import differently for esm and cjs * fix: prevent directory import in ESM build

…#169)" This reverts commit 8cf9039.

pionxzh mentioned this pull request Jan 15, 2023

style: force import type usage and add jsx-runtime rules #170

Merged

pionxzh marked this pull request as draft January 15, 2023 07:50

anthonyalayo mentioned this pull request Jan 15, 2023

Don't pull unused @mui modules by using path imports #168

Closed

pionxzh force-pushed the import-mui-on-demand branch from 070fe67 to 37f26d6 Compare January 15, 2023 15:43

pionxzh closed this Jan 15, 2023

pionxzh mentioned this pull request Jan 17, 2023

refactor: use sx rather than styled #182

Merged

pionxzh reopened this Jan 19, 2023

pionxzh force-pushed the import-mui-on-demand branch from 37f26d6 to a85a021 Compare January 19, 2023 15:38

pionxzh added 4 commits January 24, 2023 12:38

fix: reduce MUI size by using @swc/plugin-transform-imports

5afdb4e

style: apply ESLint rules to enforce correct import path

65d472d

fix: fix eslint error message

933d395

fix: add rule for @mui/material/styles

97aa588

ci: rewrite MUI import differently for esm and cjs

d19a913

pionxzh marked this pull request as ready for review January 24, 2023 06:49

fix: prevent directory import in ESM build

d0df190

pionxzh merged commit f5739d6 into TexteaInc:main Jan 27, 2023

pionxzh deleted the import-mui-on-demand branch January 27, 2023 02:21

github-actions bot mentioned this pull request Jan 27, 2023

chore(main): release json-viewer 2.14.0 #221

Merged

pionxzh mentioned this pull request Feb 22, 2023

Mui treeshaking #236

Closed

pionxzh mentioned this pull request Mar 6, 2023

Error: To load an ES module, set "type": "module" in the package.json or use the .mjs extension #240

Closed

pionxzh added a commit to pionxzh/json-viewer that referenced this pull request Mar 7, 2023

Revert "fix: reduce MUI size by using @swc/plugin-transform-imports (…

27f091b

…TexteaInc#169)" This reverts commit f5739d6.

pionxzh mentioned this pull request Mar 7, 2023

Revert "fix: reduce MUI size by using @swc/plugin-transform-imports… #247

Merged

pionxzh added a commit that referenced this pull request Mar 7, 2023

Revert "fix: reduce MUI size by using @swc/plugin-transform-imports (…

75f212b

…#169)" This reverts commit f5739d6.

pionxzh mentioned this pull request Mar 7, 2023

chore(main): release json-viewer 2.14.1 #251

Merged

Yazawazi pushed a commit that referenced this pull request Mar 10, 2023

Revert "fix: reduce MUI size by using @swc/plugin-transform-imports (…

94aec87

…#169)" This reverts commit 8cf9039.

github-actions bot mentioned this pull request Oct 9, 2023

chore(main): release json-viewer 3.0.0 #407

Closed

github-actions bot mentioned this pull request Apr 6, 2024

chore(main): release json-viewer 3.4.1 #466

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: reduce MUI size by using `@swc/plugin-transform-imports` #169

fix: reduce MUI size by using `@swc/plugin-transform-imports` #169

pionxzh commented Jan 15, 2023 •

edited

netlify bot commented Jan 15, 2023 •

edited

codecov bot commented Jan 15, 2023 •

edited

anthonyalayo commented Jan 15, 2023 •

edited

pionxzh commented Jan 15, 2023

pionxzh commented Jan 15, 2023

anthonyalayo commented Jan 15, 2023

pionxzh commented Jan 15, 2023

anthonyalayo commented Jan 15, 2023

pionxzh commented Jan 15, 2023 •

edited

pionxzh commented Jan 15, 2023

rtritto commented Jan 15, 2023 •

edited

pionxzh commented Jan 15, 2023

anthonyalayo commented Jan 16, 2023 •

edited

rtritto commented Jan 16, 2023

pionxzh commented Jan 18, 2023

pionxzh commented Jan 19, 2023

anthonyalayo commented Jan 22, 2023

pionxzh commented Jan 22, 2023

anthonyalayo commented Jan 24, 2023

pionxzh commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023

pionxzh commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023

pionxzh commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023 •

edited

pionxzh commented Jan 25, 2023 •

edited

anthonyalayo commented Jan 25, 2023

anthonyalayo commented Jan 25, 2023

pionxzh commented Jan 26, 2023

anthonyalayo commented Jan 27, 2023 •

edited

pionxzh commented Jan 27, 2023

fix: reduce MUI size by using @swc/plugin-transform-imports #169

fix: reduce MUI size by using @swc/plugin-transform-imports #169

Conversation

pionxzh commented Jan 15, 2023 • edited

netlify bot commented Jan 15, 2023 • edited

✅ Deploy Preview for any-viewer ready!

codecov bot commented Jan 15, 2023 • edited

Codecov Report

anthonyalayo commented Jan 15, 2023 • edited

pionxzh commented Jan 15, 2023

pionxzh commented Jan 15, 2023

anthonyalayo commented Jan 15, 2023

pionxzh commented Jan 15, 2023

anthonyalayo commented Jan 15, 2023

pionxzh commented Jan 15, 2023 • edited

pionxzh commented Jan 15, 2023

rtritto commented Jan 15, 2023 • edited

pionxzh commented Jan 15, 2023

anthonyalayo commented Jan 16, 2023 • edited

rtritto commented Jan 16, 2023

pionxzh commented Jan 18, 2023

pionxzh commented Jan 19, 2023

anthonyalayo commented Jan 22, 2023

pionxzh commented Jan 22, 2023

anthonyalayo commented Jan 24, 2023

pionxzh commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023

pionxzh commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023

pionxzh commented Jan 24, 2023

anthonyalayo commented Jan 24, 2023 • edited

pionxzh commented Jan 25, 2023 • edited

latest package

main (local build)

PR 169 (swc transform)

PR 168 (inline path import)

anthonyalayo commented Jan 25, 2023

anthonyalayo commented Jan 25, 2023

pionxzh commented Jan 26, 2023

anthonyalayo commented Jan 27, 2023 • edited

pionxzh commented Jan 27, 2023

fix: reduce MUI size by using `@swc/plugin-transform-imports` #169

fix: reduce MUI size by using `@swc/plugin-transform-imports` #169

pionxzh commented Jan 15, 2023 •

edited

netlify bot commented Jan 15, 2023 •

edited

codecov bot commented Jan 15, 2023 •

edited

anthonyalayo commented Jan 15, 2023 •

edited

pionxzh commented Jan 15, 2023 •

edited

rtritto commented Jan 15, 2023 •

edited

anthonyalayo commented Jan 16, 2023 •

edited

anthonyalayo commented Jan 24, 2023 •

edited

pionxzh commented Jan 25, 2023 •

edited

anthonyalayo commented Jan 27, 2023 •

edited