webpack SSR打包(React)

你的名字 2021-07-24 19:54 594阅读 0赞

1、修改打包的入口文件将import语法改成require
    	导出格式为:module.exports = <组件名 />;
    
    2、配置webpack.config.js
    	如果配置了optimization代码提取的选项,可能导出的包为空
    
    	(1)输出的打包文件不需要hash值
    	(2)配置基本不变,output添加library导出格式
    		libraryTarget:'umd'	兼容node环境
    
    3、往html文件配置占位符,用来放置打包后的组件以及首屏数据(便于搜索引擎抓取)
    	占位符自定义,最好为一个注释
    
    
    4、在node服务器中
    	(1)引入打包后的组件文件
    	(2)引入renderToString方法,该方法接收一个组件,输出字符串
    		const { renderToString } = require('react-dom/server');
    		
    	(3)引入打包后的html文件,将占位符替换成组件内容和首屏数据
    		1、通过fs读入html文件内容
    		2、通过.replace('组件占位符',rederToString(组件)).replace('数据占位符',`<script>window.__init_data=${JSON.stringify(data)}</script>`)
    
    5、报错解决
    	window错误,在服务器.js文件中,修改global.window={}
    	export错误,将入口文件的import语法改写成require语法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:  
打包文件:

const React =require('react');
    const ReactDom =require('react-dom');
    require('./index.css');
    
    
    class Search extends React.Component{ 
      render() { 
        return (<div className='t'>
          search实例SSR
        </div>)
      }
    }
    
    // ReactDom.render(<Search />,document.querySelector('#app'))
    //服务端渲染需要commonjs语法
    module.exports = <Search />;

webpack.config.js:

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    const HTMLInlineCSSWebpackPlugin = require ( "html-inline-css-webpack-plugin" ). default ;
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
    const glob = require('glob');
    const fs = require('fs');
    const TerserPlugin = require("terser-webpack-plugin");
    
    
    //如果报错exports,则将入口文件的import语法改成require
    
    module.exports = { 
      entry: './src/search/index-server.js',
      output: { 
        path: path.resolve(__dirname, 'dist'),
        //服务端去掉hash值
        filename: '[name]-server.js',
        libraryTarget:'umd'
      },
      module: { 
        rules: [
          { 
            test: /\.js$/,
            use:['babel-loader']
          },
          { 
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              { 
                loader: "postcss-loader",
                options: { 
                  postcssOptions: { 
                    plugins: [
                      [
                        "autoprefixer",
                        { 
                          overrideBrowserslist: [
                              "Android 4.1",
                              "iOS 7.1",
                              "Chrome > 31",
                              "ff > 31",
                              "ie >= 8",
                              "> 1%", // 必须大于 1% 用户使用的浏览器
                              //'last 2 versions', // 所有主流浏览器最近的 2个版本
                          ],
                        },
                      ],
                    ],
                  },
                },
              },
              { 
                loader: 'px2rem-loader',
                options: { 
                  remUnit: 75, //初始稿的10分之一,代表设计稿为750,1rem=75px,
                  remPrecision:8,  //精确的小数点位数
                }
              }
            ]
          },
          { 
            test: /\.txt$/i,
            use: [
              { 
                loader: 'raw-loader',
                options: { 
                  esModule: false,
                },
              },
            ],
          }
        ]
      },
      // optimization: { 
      // splitChunks: { 
      // cacheGroups: { 
      // commons: { 
      // test: /(react)|(react-dom)/,
      // chunks: 'all',
      // name: 'hhh',
              
      // }
      // }
      // }
      // },
      mode: "development",
      plugins: [
        new HtmlWebpackPlugin({ 
          template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({ filename:'css/build.css'}),
        new CleanWebpackPlugin()
      ]
    }

server.js:

const express = require('express');
    const {  renderToString } = require('react-dom/server');
    const path = require('path');
    const fs = require('fs');
    const data=require('./data.json')
    //如果报window的错误,在引入打包内容之前添加
    if (typeof window == 'undefined') { 
      global.window = { };
    }
    
    const ssr = require('../dist/main-server');
    const temp = fs.readFileSync(path.join(__dirname, '../dist/index.html'), 'utf-8');
    
    
    
    server(process.env.PORT || 3000);
    
    function server(port){ 
      
      const app = express();
    
      app.use(express.static('dist'));
    
      app.get('/search', (req, res) => { 
        // console.log(ssr);
        res.status(200).send(renderTemplate(renderToString(ssr)));
      })
    
      app.listen(port, () => { 
        console.log('running')
      })
    
    }
    
    const renderTemplate = (str) => { 
    
      return temp.replace('', str)
          .replace('',`<script>window.__init_data=${ JSON.stringify(data)}</script>`)
        ;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/89f9a6164634401581e82904702054f9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，594人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack打包原理(webpack打包原理优化)

fis打包和webpack打包的区别定位不同，webpack定位是一个打包工具，模块化。其实自动化的工具更好用gulp之类解决。fis3直接定位为一个全功能工具，官方文

今天药忘吃喽~/ 2023年09月26日 14:37/ 0 赞/ 14 阅读

相关 webpack打包优化(webpack打包优化文件大小)

webpack 打包怎么优化的解决webpack打包的文件体积过大的问题：确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍

喜欢ヅ旅行/ 2023年09月26日 14:37/ 0 赞/ 41 阅读

相关 vue 打包路由报错_Webpack4+vue+ssr打包后，访问路由出错

项目详情：一个 Todo 应用，有 /app \`(主页面)和 /login (登录页面)两个路由错误详情在做 ssr 渲染时，我使用了路由懒加载，然后

不念不忘少年蓝@/ 2023年01月09日 01:13/ 0 赞/ 237 阅读

相关 Webpack打包

1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sc

爱被打了一巴掌/ 2022年07月12日 09:54/ 0 赞/ 338 阅读

相关手把手教你使用Webpack打包React项目

什么是Webpack？ webpack是一个前端资源加载/打包工具，前端的常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码

朴灿烈づ我的快乐病毒、/ 2022年05月25日 07:39/ 0 赞/ 1277 阅读

相关 webpack打包

进入工作空间,npm run build,打一下生产的包打包完之后,会生成一个dist目录 ![70][] static是静态文件的存放地址在config目录

╰半夏微凉°/ 2022年05月09日 05:12/ 0 赞/ 370 阅读

相关 web性能优化系列(5)react-ssr

明确什么是服务端渲染？页面上的内容是由服务器生产的常规页面渲染面临的问题： 1、脚本依赖，加载耗时 ![在这里插入图片描述][watermark_typ

本是古典何须时尚/ 2022年03月09日 01:50/ 0 赞/ 250 阅读

相关 React教程之create-react-app+webpack打包运行项目(react-webpack-starter)

Why Webpack？兼容 CommonJS & AMD & ES6 模組規範 Bundle 效率高 JS 擴充語法的編譯自動化 (JSX, Cof

朱雀/ 2022年01月15日 00:47/ 0 赞/ 942 阅读

相关 WebPack打包

一、用webpack打包新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） !

一时失言乱红尘/ 2021年11月16日 23:40/ 0 赞/ 619 阅读

相关 webpack SSR打包(React)

1、修改打包的入口文件将import语法改成require 导出格式为:module.exports = <组件名 />; 2、配置webp

你的名字/ 2021年07月24日 19:54/ 0 赞/ 595 阅读