feat: not emit unused file in server side close #80

zhangyuang · Jul 21, 2021 · 2b9a222 · 2b9a222
1 parent ec9f685
commit 2b9a222
Show file tree

Hide file tree

Showing 13 changed files with 5,212 additions and 5,214 deletions.
diff --git a/example/midway-react-ssr/web/images/icon.png b/example/midway-react-ssr/web/images/icon.png
diff --git a/packages/cli/src/spinner.ts b/packages/cli/src/spinner.ts
@@ -1,6 +1,10 @@
 const spinner = require('ora')('正在构建')
 
-process.on('message', (data) => {
+interface Message {
+  message: 'start' | 'stop'
+}
+
+process.on('message', (data: Message) => {
   const { message } = data
   if (message === 'start') {
     spinner.start()

diff --git a/packages/plugin-react/package.json b/packages/plugin-react/package.json
@@ -44,7 +44,7 @@
     "ignore-loader": "^0.1.2",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "postcss-discard-comments": "^4.0.2",
     "postcss-flexbugs-fixes": "4.1.0",

diff --git a/packages/plugin-react/src/config/base.ts b/packages/plugin-react/src/config/base.ts
@@ -1,7 +1,7 @@
 
 import { join } from 'path'
 import { Mode } from 'ssr-types'
-import { getFeDir, getCwd, loadConfig, getLocalNodeModules, setStyle } from 'ssr-server-utils'
+import { getFeDir, getCwd, loadConfig, getLocalNodeModules, setStyle, addImageChain } from 'ssr-server-utils'
 import * as WebpackChain from 'webpack-chain'
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
@@ -78,27 +78,8 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     .set('react', loadModule('react')) // 用cwd的路径alias，否则可能会出现多个react实例
     .set('react-router', loadModule('react-router'))
     .set('react-router-dom', loadModule('react-router-dom'))
-  chain.module
-    .rule('images')
-    .test(/\.(jpe?g|png|svg|gif)(\?[a-z0-9=.]+)?$/)
-    .use('url-loader')
-    .loader(loadModule('url-loader'))
-    .options({
-      limit: 10000,
-      name: '[name].[hash:8].[ext]',
-      // require 图片的时候不用加 .default
-      esModule: false,
-      fallback: {
-        loader: loadModule('file-loader'),
-        options: {
-          publicPath: '/client/images',
-          name: '[name].[hash:8].[ext]',
-          esModule: false,
-          outputPath: 'images'
-        }
-      }
-    })
-    .end()
+
+  addImageChain(chain, isServer)
 
   const babelModule = chain.module
     .rule('compileBabel')
@@ -127,6 +108,7 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     exclude: cssModulesWhiteList,
     rule: 'css',
     modules: true,
+    isServer,
     importLoaders: 1
   }, true) // 设置css
 
@@ -135,6 +117,7 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     rule: 'less',
     loader: 'less-loader',
     modules: true,
+    isServer,
     importLoaders: 2
   }, true)
 
@@ -143,14 +126,16 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     rule: 'cssModulesWhiteListLess',
     modules: false,
     loader: 'less-loader',
-    importLoaders: 2
+    importLoaders: 2,
+    isServer
   }, true) // 默认 antd swiper 不使用 css-modules，建议第三方 ui 库都不使用
 
   setStyle(chain, /\.css$/, {
     include: cssModulesWhiteList,
     rule: 'cssModulesWhiteListCss',
     modules: false,
-    importLoaders: 1
+    importLoaders: 1,
+    isServer
   }, true)
 
   chain.module

diff --git a/packages/plugin-vue/package.json b/packages/plugin-vue/package.json
@@ -44,7 +44,7 @@
     "ignore-loader": "^0.1.2",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "postcss-discard-comments": "^4.0.2",
     "postcss-flexbugs-fixes": "4.1.0",

diff --git a/packages/plugin-vue/src/config/base.ts b/packages/plugin-vue/src/config/base.ts
@@ -1,7 +1,7 @@
 
 import { join } from 'path'
 import { Mode } from 'ssr-types'
-import { getFeDir, getCwd, loadConfig, getLocalNodeModules, setStyle } from 'ssr-server-utils'
+import { getFeDir, getCwd, loadConfig, getLocalNodeModules, setStyle, addImageChain } from 'ssr-server-utils'
 import * as WebpackChain from 'webpack-chain'
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
@@ -106,27 +106,8 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     .set('@', getFeDir())
     .set('vue$', 'vue/dist/vue.runtime.esm.js')
     .end()
-  chain.module
-    .rule('images')
-    .test(/\.(jpe?g|png|svg|gif)(\?[a-z0-9=.]+)?$/)
-    .use('url-loader')
-    .loader(loadModule('url-loader'))
-    .options({
-      limit: 10000,
-      name: '[name].[hash:8].[ext]',
-      // require 图片的时候不用加 .default
-      esModule: false,
-      fallback: {
-        loader: loadModule('file-loader'),
-        options: {
-          publicPath: '/client/images',
-          name: '[name].[hash:8].[ext]',
-          esModule: false,
-          outputPath: 'images'
-        }
-      }
-    })
-    .end()
+
+  addImageChain(chain, isServer)
 
   chain.module
     .rule('vue')
@@ -167,13 +148,15 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
   setStyle(chain, /\.css$/, {
     rule: 'css',
     modules: false,
-    importLoaders: 1
+    importLoaders: 1,
+    isServer
   }) // 设置css
   setStyle(chain, /\.less$/, {
     rule: 'less',
     loader: 'less-loader',
     modules: false,
-    importLoaders: 2
+    importLoaders: 2,
+    isServer
   })
 
   chain.module

diff --git a/packages/plugin-vue3/package.json b/packages/plugin-vue3/package.json
@@ -46,7 +46,7 @@
     "ignore-loader": "^0.1.2",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^1.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "postcss-discard-comments": "^4.0.2",
     "postcss-flexbugs-fixes": "4.1.0",

diff --git a/packages/plugin-vue3/src/config/base.ts b/packages/plugin-vue3/src/config/base.ts
@@ -1,7 +1,7 @@
 
 import { join } from 'path'
 import { Mode } from 'ssr-types'
-import { getFeDir, getCwd, loadConfig, getLocalNodeModules, setStyle } from 'ssr-server-utils'
+import { getFeDir, getCwd, loadConfig, getLocalNodeModules, setStyle, addImageChain } from 'ssr-server-utils'
 import * as WebpackChain from 'webpack-chain'
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
@@ -119,27 +119,8 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     .set('@', getFeDir())
     .set('vue$', 'vue/dist/vue.runtime.esm-bundler.js')
     .end()
-  chain.module
-    .rule('images')
-    .test(/\.(jpe?g|png|svg|gif)(\?[a-z0-9=.]+)?$/)
-    .use('url-loader')
-    .loader(loadModule('url-loader'))
-    .options({
-      limit: 10000,
-      name: '[name].[hash:8].[ext]',
-      // require 图片的时候不用加 .default
-      esModule: false,
-      fallback: {
-        loader: loadModule('file-loader'),
-        options: {
-          publicPath: '/client/images',
-          name: '[name].[hash:8].[ext]',
-          esModule: false,
-          outputPath: 'images'
-        }
-      }
-    })
-    .end()
+
+  addImageChain(chain, isServer)
 
   chain.module
     .rule('vue')
@@ -196,13 +177,16 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
   setStyle(chain, /\.css$/, {
     rule: 'css',
     modules: false,
-    importLoaders: 1
+    importLoaders: 1,
+    isServer
   }) // 设置css
+
   setStyle(chain, /\.less$/, {
     rule: 'less',
     loader: 'less-loader',
     modules: false,
-    importLoaders: 2
+    importLoaders: 2,
+    isServer
   })
 
   chain.module

diff --git a/packages/server-utils/src/webpack/common-chain.ts b/packages/server-utils/src/webpack/common-chain.ts
@@ -0,0 +1,36 @@
+import * as WebpackChain from 'webpack-chain'
+import { loadConfig } from '../loadConfig'
+
+const loadModule = require.resolve
+
+const addImageChain = (chain: WebpackChain, isServer: boolean) => {
+  const { publicPath, isDev } = loadConfig()
+  const imagePath = 'static/images'
+  const truePublicPath = isDev ? `/${imagePath}${publicPath}` : `/client/${imagePath}${publicPath}`
+  chain.module
+    .rule('images')
+    .test(/\.(jpe?g|png|svg|gif)(\?[a-z0-9=.]+)?$/)
+    .use('url-loader')
+    .loader(loadModule('url-loader'))
+    .options({
+      limit: 10000,
+      name: '[name].[hash:8].[ext]',
+      // require 图片的时候不用加 .default
+      esModule: false,
+      fallback: {
+        loader: loadModule('file-loader'),
+        options: {
+          emitFile: !isServer,
+          publicPath: truePublicPath,
+          name: '[name].[hash:8].[ext]',
+          esModule: false,
+          outputPath: imagePath
+        }
+      }
+    })
+    .end()
+}
+
+export {
+  addImageChain
+}
diff --git a/packages/server-utils/src/webpack/index.ts b/packages/server-utils/src/webpack/index.ts
@@ -1,2 +1,3 @@
 export * from './setStyle'
 export * from './externals'
+export * from './common-chain'
diff --git a/packages/server-utils/src/webpack/setStyle.ts b/packages/server-utils/src/webpack/setStyle.ts
@@ -50,6 +50,10 @@ const setStyle = (chain: WebpackChain, reg: RegExp, options: StyleOptions, isRea
     })
     .use('MiniCss')
     .loader(MiniCssExtractPlugin.loader)
+    .options({
+      // vite 场景下服务端 bundle 输出 css 文件，否则 服务端不输出
+      emit: process.env.BUILD_TOOL === 'vite' ? true : !options.isServer
+    })
     .end()
     .use('css-loader')
     .loader(loadModule('css-loader'))

diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
@@ -70,6 +70,7 @@ export interface StyleOptions {
   modules: boolean
   loader?: string
   importLoaders: number
+  isServer: boolean
 }
 
 export interface IPlugin {