feat: split server chunk #7040
+1,053
−297
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@ice/bundles': patch | ||
| '@ice/app': patch | ||
| --- | ||
|
|
||
| @ice/app: align the output result with the former esbuild | ||
| @ice/bundles: export more webpack internal modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@ice/bundles': patch | ||
| '@ice/app': patch | ||
| --- | ||
|
|
||
| @ice/app: remove unused deps and import them from @ice/bundles | ||
| @ice/bundles: compile tsconfig-paths-webpack-plugin |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@ice/app': patch | ||
| --- | ||
|
|
||
| rebase releast/next |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@ice/app': patch | ||
| --- | ||
|
|
||
| feat: minify css file; | ||
| feat: change minifier from terser to esbuildMinifier. | ||
| feat: support config minify option |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| --- | ||
| '@ice/app': patch | ||
| --- | ||
|
|
||
| - feat: change transformInclude to array | ||
| - fix: only treat .js as jsx | ||
| - feat: support customize webpack.module.rule | ||
| - feat: support handle assets |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@ice/app': minor | ||
| --- | ||
|
|
||
| support split server bundle |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('./bundle').JavascriptModulesPlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('./bundle').StartupChunkDependenciesPlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('./bundle').StartupHelpers; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('./bundle').compileBooleanMatcher; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('./bundle').identifier; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -108,4 +108,4 @@ | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,314 @@ | ||
| import { createRequire } from 'module'; | ||
| import path from 'path'; | ||
| import { fileURLToPath } from 'url'; | ||
| import { esbuild, less, sass } from '@ice/bundles'; | ||
| import MiniCssExtractPlugin from '@ice/bundles/compiled/mini-css-extract-plugin/dist/index.js'; | ||
| import TerserPlugin from '@ice/bundles/compiled/terser-webpack-plugin/index.js'; | ||
| import { getCSSModuleLocalIdent, getPostcssOpts } from '@ice/shared-config'; | ||
| import type { Config } from '@ice/shared-config/types'; | ||
| import TsconfigPathsPlugin from '@ice/bundles/compiled/tsconfig-paths-webpack-plugin/index.js'; | ||
| import CssMinimizerPlugin from '@ice/bundles/compiled/css-minimizer-webpack-plugin/index.js'; | ||
| import webpack, { type LoaderContext } from 'webpack'; | ||
| import type { UserConfig } from '../../types/userConfig.js'; | ||
| import { logger } from '../../utils/logger.js'; | ||
|
|
||
| const require = createRequire(import.meta.url); | ||
| const _dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url)); | ||
| interface Options { | ||
| publicPath: string; | ||
| postcssOptions: Config['postcss']; | ||
| rootDir: string; | ||
| enableRpx2Vw: boolean; | ||
| cssModules: Config['cssModules']; | ||
| } | ||
|
|
||
| type CSSRuleConfig = [string, string?, Record<string, any>?]; | ||
|
|
||
| export const ASSET_TYPES = [ | ||
| // images | ||
| 'png', | ||
| 'jpe?g', | ||
| 'gif', | ||
| 'svg', | ||
| 'ico', | ||
| 'webp', | ||
| 'avif', | ||
|
|
||
| // media | ||
| 'mp4', | ||
| 'webm', | ||
| 'ogg', | ||
| 'mp3', | ||
| 'wav', | ||
| 'flac', | ||
| 'aac', | ||
|
|
||
| // fonts | ||
| 'woff2?', | ||
| 'eot', | ||
| 'ttf', | ||
| 'otf', | ||
|
|
||
| // other | ||
| 'wasm', | ||
| 'webmanifest', | ||
| 'pdf', | ||
| 'txt', | ||
| ]; | ||
|
|
||
| const ASSETS_RE = new RegExp(`\\.(${ASSET_TYPES.join('|')})(\\?.*)?$`); | ||
|
|
||
| export class WebpackServerCompiler { | ||
| private config: webpack.Configuration; | ||
| private options: { userServerConfig: UserConfig['server']; [key: string]: any }; | ||
|
|
||
| constructor(options: any) { | ||
| this.options = options; | ||
| this.config = this.createWebpackConfig(options); | ||
| } | ||
| private configCSSRule(config: CSSRuleConfig, options: Options) { | ||
| const { publicPath, rootDir, enableRpx2Vw, postcssOptions: userPostcssOptions, cssModules } = options; | ||
| const [style, loader, loaderOptions] = config; | ||
| const cssLoaderOpts = { | ||
| sourceMap: false, | ||
| }; | ||
| const cssModuleLoaderOpts = { | ||
| ...cssLoaderOpts, | ||
| modules: { | ||
| auto: (resourcePath: string) => resourcePath.endsWith(`.module.${style}`), | ||
| getLocalIdent: (context: LoaderContext<any>, localIdentName: string, localName: string) => { | ||
| return getCSSModuleLocalIdent(context.resourcePath, localName, cssModules?.localIdentName); | ||
| }, | ||
| }, | ||
| }; | ||
| const postcssOpts = getPostcssOpts({ rootDir, userPostcssOptions, enableRpx2Vw }); | ||
| return { | ||
| test: new RegExp(`\\.${style}$`), | ||
| use: [ | ||
| { | ||
| loader: MiniCssExtractPlugin.loader, | ||
| // compatible with commonjs syntax: const styles = require('./index.module.less') | ||
| options: { | ||
| esModule: false, | ||
| publicPath, | ||
| }, | ||
| }, | ||
| { | ||
| loader: require.resolve('@ice/bundles/compiled/css-loader'), | ||
| options: cssModuleLoaderOpts, | ||
| }, | ||
| { | ||
| loader: require.resolve('@ice/bundles/compiled/postcss-loader'), | ||
| options: { | ||
| ...cssLoaderOpts, | ||
| ...postcssOpts, | ||
| }, | ||
| }, | ||
| loader && { | ||
| loader, | ||
| options: { ...cssLoaderOpts, ...loaderOptions }, | ||
| }, | ||
| ].filter(Boolean), | ||
| }; | ||
| } | ||
|
|
||
| private createWebpackConfig(options: { | ||
| userServerConfig: UserConfig['server']; | ||
| [key: string]: any; | ||
| }): webpack.Configuration { | ||
| const { userServerConfig } = options; | ||
| const { webpackConfig = {} } = userServerConfig; | ||
| const cssRules = [ | ||
| ['css'], | ||
| [ | ||
| 'less', | ||
| require.resolve('@ice/bundles/compiled/less-loader'), | ||
| { | ||
| lessOptions: { javascriptEnabled: true }, | ||
| implementation: less, | ||
| }, | ||
| ], | ||
| [ | ||
| 'scss', | ||
| require.resolve('@ice/bundles/compiled/sass-loader'), | ||
| { | ||
| implementation: sass, | ||
| }, | ||
| ], | ||
| ].map((config: any) => | ||
| this.configCSSRule(config, { | ||
| publicPath: '/', | ||
| postcssOptions: {}, | ||
| rootDir: process.cwd(), | ||
| enableRpx2Vw: true, | ||
| cssModules: {}, | ||
| }), | ||
| ); | ||
| const cssOutputFolder = 'css'; | ||
| const hashKey = ''; | ||
| const cssFilename = undefined; | ||
| const cssChunkFilename = undefined; | ||
|
|
||
| for (const key of Object.keys(options.alias)) { | ||
| if (options.alias[key].startsWith('./')) { | ||
| options.alias[key] = path.resolve(options.rootDir, options.alias[key]); | ||
| } | ||
| } | ||
| return { | ||
| mode: 'production', | ||
| entry: options.entryPoints as string[], | ||
| target: 'node12.20', | ||
| externalsPresets: { | ||
| node: false, | ||
| }, | ||
| output: { | ||
| filename: `[name].${options.format === 'esm' ? 'mjs' : 'cjs'}`, | ||
| path: options.outdir, | ||
| // align the output with former esbuild | ||
| chunkFormat: false, | ||
| clean: true, | ||
| library: { | ||
| type: 'commonjs2', | ||
| }, | ||
| ...(webpackConfig.output as any), | ||
| }, | ||
| devtool: 'source-map', | ||
| externals: options.externals, | ||
| optimization: { | ||
| minimize: !!options.minify, | ||
| minimizer: [ | ||
| new TerserPlugin({ | ||
| extractComments: false, | ||
| terserOptions: typeof options.minify === 'object' ? options.minify : undefined, | ||
| minify: TerserPlugin.esbuildMinify, | ||
| }), | ||
| new CssMinimizerPlugin({ | ||
| parallel: false, | ||
| minimizerOptions: { | ||
| preset: [ | ||
| 'default', | ||
| { | ||
| discardComments: { removeAll: true }, | ||
| }, | ||
| ], | ||
| }, | ||
| }), | ||
| ], | ||
| ...(webpackConfig.optimization as any), | ||
| }, | ||
| resolve: { | ||
| alias: options.alias, | ||
| fallback: { crypto: false }, | ||
| extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs', '...'], | ||
| plugins: [ | ||
| new TsconfigPathsPlugin({ | ||
|
There was a problem hiding this comment. 这个是必要插件吗，理论上编译不受 tsconfig 影响 |
||
| /* options: see below */ | ||
| }), | ||
| ], | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| // Use esbuild to compile JavaScript & TypeScript | ||
| { | ||
| // // Match `.js`, `.jsx`, `.ts` or `.tsx` files | ||
| test: /\.m?[jt]sx?$/, | ||
| exclude(path) { | ||
| if (path.includes('node_modules')) { | ||
| if (webpackConfig.transformInclude) { | ||
| return !webpackConfig.transformInclude.some((i) => { | ||
| if (i instanceof RegExp) { | ||
| return i.test(path); | ||
| } else if (typeof i === 'string') { | ||
| return path.includes(i); | ||
| } else { | ||
| return false; | ||
| } | ||
| }); | ||
| } else { | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| }, | ||
| use: [ | ||
| (info: any) => { | ||
| const ext = path.extname(info.resource); | ||
| return { | ||
| loader: '@ice/bundles/compiled/esbuild-loader', | ||
| // available options: https://github.com/evanw/esbuild/blob/88821b7e7d46737f633120f91c65f662eace0bcf/lib/shared/types.ts#L158-L172 | ||
| options: { | ||
| target: options.target, | ||
| // make sure tree shaking is worked | ||
| format: 'esm', | ||
| loader: ext === '.js' ? 'jsx' : 'default', | ||
| jsx: options.jsx, | ||
| jsxImportSource: '@ice/runtime/react', | ||
| sourcemap: options.sourcemap, | ||
| define: options.define, | ||
| // banner can only be string in transform mode | ||
| banner: options.banner?.js, | ||
| implementation: esbuild, | ||
| }, | ||
| }; | ||
| }, | ||
| path.resolve(_dirname, 'removeMagicString.js'), | ||
| ], | ||
| }, | ||
| { | ||
| test: ASSETS_RE, | ||
|
There was a problem hiding this comment. webpack 大部分规则是不是跟 csr 对齐就好了，没必要单独这里维护，对于 node 端而言主要是产物 target 和样式处理规则的差异 |
||
| type: 'asset/inline', | ||
| }, | ||
| ...cssRules, | ||
| ...(webpackConfig.module?.rules || []), | ||
| ], | ||
| }, | ||
| plugins: [ | ||
| ...options.plugins, | ||
| new webpack.DefinePlugin(options.define), | ||
| new webpack.SourceMapDevToolPlugin({ | ||
| // remove append sourcemap comment | ||
| append: false, | ||
| filename: '[file].map', | ||
| moduleFilenameTemplate: '[absolute-resource-path]', | ||
| }), | ||
| new MiniCssExtractPlugin({ | ||
| filename: cssFilename || `${cssOutputFolder}/${hashKey ? `[name]-[${hashKey}].css` : '[name].css'}`, | ||
| chunkFilename: cssChunkFilename || `${cssOutputFolder}/${hashKey ? `[name]-[${hashKey}].css` : '[name].css'}`, | ||
| // If the warning is triggered, it seen to be unactionable for the user, | ||
| ignoreOrder: true, | ||
| }), | ||
| ...(webpackConfig.plugins || []), | ||
| ], | ||
| stats: { | ||
| errorDetails: true, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| private async handleEsbuildInject() { | ||
| const provideRecord = {}; | ||
| const allInjects = await Promise.all(this.options.inject.map((inj) => import(inj))); | ||
| allInjects.forEach((injs, index) => { | ||
| Object.keys(injs).forEach((key) => { | ||
| provideRecord[key] = [this.options.inject[index], key]; | ||
| }); | ||
| }); | ||
| return new webpack.ProvidePlugin(provideRecord); | ||
| } | ||
|
|
||
| async build(): Promise<any> { | ||
| const providePlugin = await this.handleEsbuildInject(); | ||
| this.config.plugins.push(providePlugin); | ||
| return new Promise((resolve, reject) => { | ||
| webpack(this.config, (err, stats) => { | ||
| if (err || stats?.hasErrors?.()) { | ||
| logger.error(err || stats.toString()); | ||
| reject(err || stats.toString()); | ||
| process.exit(1); | ||
| } else { | ||
| resolve(stats); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export default function (source: string) { | ||
| const result = source.replace( | ||
| /webpackChunkName:\s*["'][^"']+["']/g, | ||
| 'webpackMode: "eager"', | ||
| ); | ||
|
|
||
| // Return the modified source | ||
| return result; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { type AssetsManifest } from '@ice/runtime/types'; | ||
| import NormalModule from 'webpack/lib/NormalModule.js'; | ||
| import { type Compiler } from '@ice/bundles/compiled/webpack'; | ||
|
|
||
| interface CompilationInfo { | ||
| assetsManifest?: AssetsManifest; | ||
| } | ||
|
|
||
| const PLUGIN_NAME = 'VirtualManifestPlugin'; | ||
| class VirtualManifestPlugin { | ||
| private rootDir: string; | ||
| private compilationInfo: CompilationInfo | (() => CompilationInfo); | ||
|
|
||
| constructor(options) { | ||
| this.rootDir = options.rootDir; | ||
| this.compilationInfo = options.compilationInfo; | ||
| } | ||
|
|
||
| apply(compiler: Compiler) { | ||
| compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation, { normalModuleFactory }) => { | ||
| NormalModule.getCompilationHooks(compilation) | ||
| .readResource.for('virtual') | ||
| .tap(PLUGIN_NAME, () => { | ||
| const manifest = this.generateManifestContent(); | ||
| return JSON.stringify(manifest?.assetsManifest || ''); | ||
| }); | ||
| normalModuleFactory.hooks.beforeResolve.tap(PLUGIN_NAME, (resolveData) => { | ||
| if (resolveData.request === 'virtual:assets-manifest.json') { | ||
| resolveData.assertions = { | ||
| type: 'json', | ||
| }; | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| generateManifestContent() { | ||
| return typeof this.compilationInfo === 'function' ? this.compilationInfo() : this.compilationInfo; | ||
| } | ||
| } | ||
|
|
||
| export default VirtualManifestPlugin; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
没必要同时获取 transformWebpackPlugins 和 esbuildPlugins