vue-ssr 4.优化打包和支持preload

由于服务端渲染，写死了加载文件，所以改成动态形式

服务端渲染，自动关联到打包后的文件

通过VueSSRServerPlugin、VueSSRClientPlugin 打包，让服务端动态关联到打包配置

webpack.server.js

jsx

const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { merge } = require("webpack-merge");
const { resolve, ...base } = require("./webpack.base");

module.exports = merge(base, {
 mode: "development",
 target: "node",
 entry: {
  server: resolve("../src/server-entry.js")
 },
 output: {
  libraryTarget: "commonjs2"
 },
 plugins: [
  new VueSSRServerPlugin(),
  new HtmlWebpackPlugin({
   filename: "index.ssr.html",
   template: resolve("../public/index.ssr.html"),
   excludeChunks: ['server'],
   minify: false,
   client: '/client.bundle.js'
  }),
 ]
})

webpack.client.js

jsx

const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');

const { merge } = require("webpack-merge");
const { resolve, ...base } = require("./webpack.base");

console.log(process.env.mode);

module.exports = merge(base, {
 mode: "development",
 entry: {
  client: resolve("../src/client-entry.js")
 },
 output: {
  // clean: true,
 },
 plugins: [
  new VueSSRClientPlugin(),
  new HtmlWebpackPlugin({
   filename: process.env.mode === 'development' ? "index.html" : "index.client.html",
   template: resolve("../public/index.client.html")
  }),
 ]
})

webpack.base.js：将输出统一至base文件中

jsx

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

const resolve = (p) => path.resolve(__dirname, p);

let config = exports = module.exports;
const ASSET_PATH = process.env.ASSET_PATH || '/';

config = {
 mode: "development",
 entry: resolve("../src/client.js"),
 output: {
  filename: '[name].bundle.js',
  path: resolve('../dist'),
  //! 注意：需要添加publicPath, 否则会导致服务端渲染出来的html中preload预加载的client.bundle.js 会添加auto前缀，导致加载路径错误导致报错
  publicPath: ASSET_PATH
 },
 resolve: {
  extensions: [".js", ".json", ".vue"]
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    use: { loader: 'vue-loader' }
   },
   {
    test: /\*.js/,
    use: {
     loader: 'babel-loader',
     options: {
      presets: ["@bable/preset-env"]
     }
    }
   },
   {
    test: /\.css/,
    use: [
     "vue-style-loader",
     {
      loader: "css-loader",
      options: {
       esModule: false
      }
     }
    ]
   }
  ]
 },
 plugins: [
  new VueLoaderPlugin(),
 ]
}

config.resolve = resolve;
module.exports = config;

server.js : 根据打包后的配置文件来关联打包文件

jsx

const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
const VueServerRender = require("vue-server-renderer");
const fs = require("fs");
const path = require("path");
const resolve = (p) => path.resolve(__dirname, p);

const serverTemplete = fs.readFileSync(resolve("dist/index.ssr.html"), "utf8");
//! 通过vue-ssr-server-bundle.json 关联服务端打包文件server.bundle.js，避免写死读取的配置文件
const serverBundle = require(resolve("dist/vue-ssr-server-bundle.json"));
//! 通过vue-ssr-client-manifest.json 关联client打包文件client.bundle.js，避免写死读取的配置文件
const clientManifest = require(resolve("dist/vue-ssr-client-manifest.json"));

const render = VueServerRender.createBundleRenderer(serverBundle, { template: serverTemplete, clientManifest });

const app = new Koa();
const router = new Router();

//! 说明：匹配非首页路径，否则会显示404页面
router.get("/(.*)", async (ctx) => {
 ctx.body = await new Promise((resolve) => {
  render.renderToString({ url: ctx.url }, (err, html) => {
   if (err && err.code == 404) resolve(`not found 404`);
   resolve(html)
  })
 })
})

//! 特别注意：要先匹配static中间件，否则会导致全部进制get中然后渲染成html导致，请求client.bundle.js文件都是返回html内容
app.use(static(resolve("dist")));
app.use(router.routes());

app.listen(4000, () => {
 console.log("server start success port:", 4000);
});

总结

通过VueSSRServerPlugin、VueSSRClientPlugin 打包出来的json文件，然后让服务端通过打包后的固定json文件来关联client.bundle.js 和server.bundle.js，避免写死读取的配置文件
需要添加publicPath, 否则会导致服务端渲染出来的html中preload预加载的client.bundle.js 会添加auto前缀，导致加载路径错误导致报错

以上：如发现有问题，欢迎留言指出，我及时更正

vue-ssr 4.优化打包和支持preload ​

服务端渲染，自动关联到打包后的文件 ​

总结 ​

vue-ssr 4.优化打包和支持preload

服务端渲染，自动关联到打包后的文件

总结