Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unused css is also packaged in, when use semi in vite #337

Closed
pointhalo opened this issue Nov 30, 2021 · 4 comments
Closed

Unused css is also packaged in, when use semi in vite #337

pointhalo opened this issue Nov 30, 2021 · 4 comments
Assignees
Labels
bug Something isn't working build

Comments

@pointhalo
Copy link
Collaborator

pointhalo commented Nov 30, 2021

Which Component 出现bug的组件

  • Semi

semi-ui version

  • 2.1.1

Expected result 期望的结果是什么

  • When only the button is used, only the button is included in the css of the build product, and no other components are included

Actual result 实际的结果是什么

  • The css of all components will be packaged when run npm run build

Additional information 补充说明

  • Using the same code, webpack is normal
@pointhalo pointhalo added the bug Something isn't working label Nov 30, 2021
@pointhalo pointhalo changed the title Vite build can't shaking css Vite build can't shaking css which unuse Nov 30, 2021
@pointhalo pointhalo changed the title Vite build can't shaking css which unuse Unused css is also packaged in, when used semi in vite Nov 30, 2021
@pointhalo
Copy link
Collaborator Author

Additional information

  • vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})
  • package.json
{
  "name": "vite-ts-semi2.x",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "@douyinfe/semi-ui": "2.1.2",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react": "^1.0.0",
    "typescript": "^4.3.2",
    "vite": "^2.6.4"
  }
}

  • app.tsx
import React, { useState } from 'react'
import logo from './logo.svg'

import { Button } from '@douyinfe/semi-ui';                                   // not work
// import Button from '@douyinfe/semi-ui/lib/es/button/index';   // work

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <header className="App-header">
        {/* <Input style={{ width: 300 }} /> */}
        <Button>Test</Button>
      </header>
    </div>
  )
}

export default App

@pointhalo pointhalo self-assigned this Dec 1, 2021
@pointhalo pointhalo changed the title Unused css is also packaged in, when used semi in vite Unused css is also packaged in, when use semi in vite Dec 1, 2021
@pointhalo pointhalo added the build label Dec 2, 2021
@JokerQyou
Copy link

Is there any ETA for a solution to this bug? I also suspect unused JS is also bundled into final product when using vite.

@pointhalo
Copy link
Collaborator Author

Is there any ETA for a solution to this bug? I also suspect unused JS is also bundled into final product when using vite.

js is not affected, you can check through the final bundled product. (eg import button only)

@pointhalo pointhalo added wontfix This will not be worked on and removed wontfix This will not be worked on labels Jul 14, 2022
@pointhalo
Copy link
Collaborator Author

i test with vite v2.6.4& v3 again.
The test found that the vite of v3, the packaging behavior has been consistent with webpack.
This issue can be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working build
Projects
None yet
Development

No branches or pull requests

2 participants