question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

code splitting on build is not working

See original GitHub issue

Environment

  • Operating System: Windows_NT
  • Node Version: v16.15.1
  • Nuxt Version: 3.0.0-rc.6
  • Package Manager: yarn@1.22.15
  • Builder: vite
  • User Config: modules, ssr, modern, build, css, buildModules, runtimeConfig, vite, builder, webpack
  • Runtime Modules: @nuxt/image-edge@1.0.0-27628766.3629b9a, ~/modules/home/index.ts, ~/modules/product/index.ts, ~/modules/catalog/index.ts, ~/modules/cart/index.ts, ~/modules/common/index.ts, ~/modules/productRowSlider/index.ts, ~/modules/productCard/index.ts, ~/modules/header/index.ts, ~/modules/shop/index.ts, ~/modules/staticPages/index.ts, ~/modules/notifications/index.ts
  • Build Modules: @pinia/nuxt@0.3.0

Reproduction

Can’t provide reproduction. Cause it’s private

Describe the bug

I m developing project in DDD pattern. In my project every page is seperate module. I have imported every css (scss) files seperately on its module. In vite configs I have set build.cssTarget to true and lib mode false. I have built my project with vite bundler. But bundler generated files strangely. As you can see on the photo below, bundler generated only 4 css files. All the styles are merged into entry.611f2b22.css file except other 3 css files on the photo. But I have imported css files seperately inside its page or components. image

Additional context

Actually I need to speed up project. But my performance score on Lighthouse is below 45 on average and in some pages even below 20. I need to split all the js and css files as much as possible, need to reduce unused styles on every page. That is why code splitting is very important for me. I have tried wite optimal vite config. But I think some vite configs are not working or I am using it in a wrong way. Could somebody help me with setting up vite config? image

My nuxt config file: image

Also I have tried to build with webpack and on nuxt config set builder to ‘webpack’. But it didn’t help me and some errors occured during build.

Logs

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
Sherzod06commented, Jul 21, 2022

Sorry I accidentally clicked to close with comment button

0reactions
danielroecommented, Aug 19, 2022

@MohammadKhalaji If you are encountering something similar, or the same, please open a new issue with a reproduction. 🙏

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack config for Code splitting not working for production ...
I've heard there are issues with webpack and chunking when you minify the code. Supposedly it decides on how to chunk BEFORE it...
Read more >
Code Splitting - webpack
Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which...
Read more >
Code-Splitting - React
Here's an example of how to setup route-based code splitting into your app using libraries like React Router with React.lazy .
Read more >
Code Splitting and Prefetching - Gatsby
Code splitting in Gatsby occurs during webpack compilation via Dynamic Splitting. During compilation, if webpack finds an import function invocation, ...
Read more >
Webpack config for Code splitting not working for production ...
Coding example for the question Webpack config for Code splitting not working for production build-Reactjs.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found