From 7e0ec16afff0358c010fbba3bd6f35d4b1e29731 Mon Sep 17 00:00:00 2001 From: Fy <1114550440@qq.com> Date: Thu, 6 Jun 2024 16:16:38 +0800 Subject: [PATCH] fix: support lazy css using css-extract (#6747) --- .../src/compiler/module_executor/ctrl.rs | 4 +- .../src/compiler/module_executor/entry.rs | 13 +++-- .../src/compiler/module_executor/mod.rs | 7 ++- .../src/dependency/loader_import.rs | 52 +++++++++++++++++++ crates/rspack_core/src/dependency/mod.rs | 2 + .../src/plugin/impl_plugin_for_js_plugin.rs | 5 ++ .../ignore-entry/index.test.ts | 5 ++ .../ignore-entry/rspack.config.js | 16 ++++-- .../ignore-entry/src/index.css | 3 ++ 9 files changed, 93 insertions(+), 14 deletions(-) create mode 100644 crates/rspack_core/src/dependency/loader_import.rs create mode 100644 packages/playground/cases/lazy-compilation/ignore-entry/src/index.css diff --git a/crates/rspack_core/src/compiler/module_executor/ctrl.rs b/crates/rspack_core/src/compiler/module_executor/ctrl.rs index f0c07eb8f64..2aec1f77ef0 100644 --- a/crates/rspack_core/src/compiler/module_executor/ctrl.rs +++ b/crates/rspack_core/src/compiler/module_executor/ctrl.rs @@ -139,7 +139,7 @@ impl Task for CtrlTask { Event::ExecuteModule(param, execute_task) => { let dep_id = match ¶m { EntryParam::DependencyId(id, _) => *id, - EntryParam::EntryDependency(dep) => *dep.id(), + EntryParam::Entry(dep) => *dep.id(), }; self.execute_task_map.insert(dep_id, execute_task); return Ok(vec![Box::new(EntryTask { param }), self]); @@ -238,7 +238,7 @@ impl Task for FinishModuleTask { Event::ExecuteModule(param, execute_task) => { let dep_id = match ¶m { EntryParam::DependencyId(id, _) => *id, - EntryParam::EntryDependency(dep) => *dep.id(), + EntryParam::Entry(dep) => *dep.id(), }; ctrl_task.execute_task_map.insert(dep_id, execute_task); res.push(Box::new(EntryTask { param })); diff --git a/crates/rspack_core/src/compiler/module_executor/entry.rs b/crates/rspack_core/src/compiler/module_executor/entry.rs index 1f64094950a..66375fbd6aa 100644 --- a/crates/rspack_core/src/compiler/module_executor/entry.rs +++ b/crates/rspack_core/src/compiler/module_executor/entry.rs @@ -4,13 +4,13 @@ use super::ctrl::Event; use crate::{ compiler::make::repair::{factorize::FactorizeTask, MakeTaskContext}, utils::task_loop::{Task, TaskResult, TaskType}, - Dependency, DependencyId, EntryDependency, ModuleProfile, + Dependency, DependencyId, LoaderImportDependency, ModuleProfile, }; #[derive(Debug)] pub enum EntryParam { DependencyId(DependencyId, UnboundedSender), - EntryDependency(Box), + Entry(Box), } #[derive(Debug)] @@ -39,14 +39,19 @@ impl Task for EntryTask { } Ok(vec![]) } - EntryParam::EntryDependency(dep) => { + EntryParam::Entry(dep) => { let dep_id = *dep.id(); module_graph.add_dependency(dep.clone()); Ok(vec![Box::new(FactorizeTask { module_factory: context .dependency_factories .get(dep.dependency_type()) - .expect("should have dependency_factories") + .unwrap_or_else(|| { + panic!( + "should have dependency_factories for dependency_type: {}", + dep.dependency_type() + ) + }) .clone(), original_module_identifier: None, original_module_source: None, diff --git a/crates/rspack_core/src/compiler/module_executor/mod.rs b/crates/rspack_core/src/compiler/module_executor/mod.rs index c5e6b8ec02a..df1baff683d 100644 --- a/crates/rspack_core/src/compiler/module_executor/mod.rs +++ b/crates/rspack_core/src/compiler/module_executor/mod.rs @@ -21,7 +21,7 @@ use self::{ use super::make::{repair::MakeTaskContext, update_module_graph, MakeArtifact, MakeParam}; use crate::{ task_loop::run_task_loop_with_event, Compilation, CompilationAsset, Context, Dependency, - DependencyId, EntryDependency, + DependencyId, LoaderImportDependency, }; #[derive(Debug, Default)] @@ -123,14 +123,13 @@ impl ModuleExecutor { .expect("should have event sender"); let (param, dep_id) = match self.request_dep_map.entry(request.clone()) { Entry::Vacant(v) => { - let dep = EntryDependency::new( + let dep = LoaderImportDependency::new( request.clone(), original_module_context.unwrap_or(Context::from("")), - false, ); let dep_id = *dep.id(); v.insert(dep_id); - (EntryParam::EntryDependency(Box::new(dep)), dep_id) + (EntryParam::Entry(Box::new(dep)), dep_id) } Entry::Occupied(v) => { let dep_id = *v.get(); diff --git a/crates/rspack_core/src/dependency/loader_import.rs b/crates/rspack_core/src/dependency/loader_import.rs new file mode 100644 index 00000000000..3d039e5d0ec --- /dev/null +++ b/crates/rspack_core/src/dependency/loader_import.rs @@ -0,0 +1,52 @@ +use crate::{ + AsContextDependency, AsDependencyTemplate, Context, Dependency, DependencyCategory, DependencyId, + DependencyType, ModuleDependency, +}; + +#[derive(Debug, Hash, PartialEq, Eq, Clone)] +pub struct LoaderImportDependency { + id: DependencyId, + context: Context, + request: String, +} + +impl LoaderImportDependency { + pub fn new(request: String, context: Context) -> Self { + Self { + request, + context, + id: DependencyId::new(), + } + } +} + +impl AsDependencyTemplate for LoaderImportDependency {} +impl AsContextDependency for LoaderImportDependency {} + +impl Dependency for LoaderImportDependency { + fn id(&self) -> &DependencyId { + &self.id + } + + fn category(&self) -> &DependencyCategory { + &DependencyCategory::LoaderImport + } + + fn dependency_type(&self) -> &DependencyType { + &DependencyType::LoaderImport + } +} + +impl ModuleDependency for LoaderImportDependency { + fn request(&self) -> &str { + &self.request + } + + fn user_request(&self) -> &str { + &self.request + } + + fn set_request(&mut self, request: String) { + self.request = request; + } +} diff --git a/crates/rspack_core/src/dependency/mod.rs b/crates/rspack_core/src/dependency/mod.rs index 986c24c10dd..6c0cfb42bd4 100644 --- a/crates/rspack_core/src/dependency/mod.rs +++ b/crates/rspack_core/src/dependency/mod.rs @@ -10,6 +10,7 @@ mod dependency_trait; mod dependency_type; mod entry; mod import_dependency_trait; +mod loader_import; mod module_dependency; mod runtime_requirements_dependency; mod runtime_template; @@ -29,6 +30,7 @@ pub use dependency_trait::*; pub use dependency_type::DependencyType; pub use entry::*; pub use import_dependency_trait::ImportDependencyTrait; +pub use loader_import::*; pub use module_dependency::*; pub use runtime_requirements_dependency::RuntimeRequirementsDependency; pub use runtime_template::*; diff --git a/crates/rspack_plugin_javascript/src/plugin/impl_plugin_for_js_plugin.rs b/crates/rspack_plugin_javascript/src/plugin/impl_plugin_for_js_plugin.rs index 8aeb3ba377b..5e286948452 100644 --- a/crates/rspack_plugin_javascript/src/plugin/impl_plugin_for_js_plugin.rs +++ b/crates/rspack_plugin_javascript/src/plugin/impl_plugin_for_js_plugin.rs @@ -105,6 +105,11 @@ async fn compilation( DependencyType::Provided, params.normal_module_factory.clone(), ); + // ImportModule + compilation.set_dependency_factory( + DependencyType::LoaderImport, + params.normal_module_factory.clone(), + ); // other compilation.set_dependency_factory( DependencyType::WebpackIsIncluded, diff --git a/packages/playground/cases/lazy-compilation/ignore-entry/index.test.ts b/packages/playground/cases/lazy-compilation/ignore-entry/index.test.ts index 0c3e69b2ef0..a6b5be37884 100644 --- a/packages/playground/cases/lazy-compilation/ignore-entry/index.test.ts +++ b/packages/playground/cases/lazy-compilation/ignore-entry/index.test.ts @@ -3,4 +3,9 @@ import { expect, test } from "@/fixtures"; test("should load success", async ({ page }) => { await page.getByText("Click me").click(); await expect(page).toHaveURL(/success/); + const body = await page.$("body"); + const backgroundColor = await body!.evaluate( + el => window.getComputedStyle(el).backgroundColor + ); + expect(backgroundColor, "blue"); }); diff --git a/packages/playground/cases/lazy-compilation/ignore-entry/rspack.config.js b/packages/playground/cases/lazy-compilation/ignore-entry/rspack.config.js index c6f9174f373..3e84a8acfdb 100644 --- a/packages/playground/cases/lazy-compilation/ignore-entry/rspack.config.js +++ b/packages/playground/cases/lazy-compilation/ignore-entry/rspack.config.js @@ -7,16 +7,24 @@ module.exports = { main: [ // Will trigger the issue. 'data:text/javascript,import "core-js";', + "./src/index.css", "./src/index.js" ] }, stats: "none", mode: "development", - plugins: [new rspack.HtmlRspackPlugin()], + module: { + rules: [ + { + test: /\.css$/, + use: [rspack.CssExtractRspackPlugin.loader, "css-loader"] + } + ] + }, + plugins: [new rspack.HtmlRspackPlugin(), new rspack.CssExtractRspackPlugin()], experiments: { - lazyCompilation: { - entries: true - } + css: false, + lazyCompilation: true }, devServer: { hot: true diff --git a/packages/playground/cases/lazy-compilation/ignore-entry/src/index.css b/packages/playground/cases/lazy-compilation/ignore-entry/src/index.css new file mode 100644 index 00000000000..3e8faada5ac --- /dev/null +++ b/packages/playground/cases/lazy-compilation/ignore-entry/src/index.css @@ -0,0 +1,3 @@ +html { + background-color: blue; +}