vue ssr css内联样式和link标签重复

Question

我把基于vue-cli3的项目改造成了SSR，发现服务器吐出的html中内联了css，同时还会注入css的link标签，这样造成了css的重复引入。

我不想在html中注入内联的style，我想全部使用link标签，对于不经常变化的css这样能更好的利用缓存，该如何做？

以下是vue.config.js

const WebpackBar = require('webpackbar');
const nodeExternals = require('webpack-node-externals');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');

const IS_PROD = process.env.NODE_ENV === 'production';
// 用于标记是否是SSR构建
const IS_SSR = process.env.RUN_MODE === 'ssr';
// 用于区分SSR的client和server构建
const { SSR_SIDE } = process.env;
const IS_SSR_SERVER = SSR_SIDE === 'server';

module.exports = {
  productionSourceMap: false,

  css: {
    extract: IS_PROD && (!IS_SSR || !IS_SSR_SERVER),
  },

  chainWebpack(config) {
    // 默认入口
    config
      .entry('app')
      .clear()
      .add('./src/entry-client.js')
      .end();

    if (!IS_SSR || !['server', 'client'].includes(SSR_SIDE)) return;

    // ssr入口
    config
      .entry('app')
      .clear()
      .add(`./src/entry-${SSR_SIDE}.js`)
      .end();

    // loader
    config
      .module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        if (IS_SSR_SERVER) {
          options.cacheIdentifier += '-server';
          options.cacheDirectory += '-server';
        }
        options.optimizeSSR = IS_SSR_SERVER;
        options.extractCSS = IS_PROD;

        return options;
      })
      .end()
      .use('cache-loader')
      .tap((options) => {
        if (IS_SSR_SERVER) {
          options.cacheIdentifier += '-server';
          options.cacheDirectory += '-server';
        }
        return options;
      });

    // plugin
    config
      .plugin('vue-ssr')
      .use(IS_SSR_SERVER ? VueSSRServerPlugin : VueSSRClientPlugin)
      .end()
      .plugin('loader')
      .use(WebpackBar, [{
        name: IS_SSR_SERVER ? 'Build server' : 'Build client',
        color: IS_SSR_SERVER ? 'blue' : 'green',
      }])
      .end();

    // 移除不必要的plugin
    config
      .plugins
      .delete('hmr')
      .delete('preload')
      .delete('prefetch')
      .delete('progress');

    config
      .target(IS_SSR_SERVER ? 'node' : 'web');

    if (IS_SSR_SERVER) {
      config
        .devtool('source-map')
        .node
        .clear()
        .end()
        .output
        .libraryTarget('commonjs2')
        .end()
        .externals(nodeExternals({ whitelist: [/\.css$/, /\?vue&type=style/] }))
        .optimization
        .splitChunks(false);
    }
  },
};

通过以上的ssr配置，吐出的html如下：

其中，内联的style与/css/app.84e85091.css和/css/home.fb83d978.css内容重复

项目地址：https://github.com/Zousdie/crazy-vue-ssr

Answer 1

如果有人需要解决这个问题，可以看一下我的这个方法https://www.jianshu.com/p/2ea74be53425