• der果
    2019-07-03
    老师,讲的超级棒!
    突然想问个问题,大厂是怎么个工作流程。比如码农们提交了自己的代码,之后都发生了什么,代码就被发布到了服务器。我们现在都是最原始的流程,一个人本地打包,然后FTP到服务器,我想大厂不会这么low的,老师说一下大概流程吧,多谢(o^^o)

    作者回复: 大厂是有一套比较完善的CI/CD工作流程,比如:Gitlab CI或者Jenkins CI等等。每次代码push都会经过CI阶段,会开一个Docker镜像跑任务。进行代码打包构建、单元测试和代码ESLint检查。

    如果没问题,则会进行测试环境或者生产环境的代码部署,这个阶段会经历Code Review,打出版本包,包升级下发到指定机器。然后完成部署流程。

    
     8
  • 小石头若海
    2019-08-15
    有一个问题想请教下老师,SSR的本意是在server端拿到数据后渲染成html,一次性发到客户端,可以免去客户端的请求。

    但是假如这个请求就是比较耗时,server端处理的时间不是变长了吗?这是不是会导致服务响应的时长变长?从而导致客户端的白屏时长变长?
    
     4
  • 金樽明月
    2019-06-28
    越来越有意思了,哈哈

    作者回复: 后面干货多多,哈哈😄

    
     4
  • 北至
    2019-09-26
    老师我在写代码的时候发现了个小坑,但是搞不懂为什么

    node index 和 node server/index
    前者开启的页面无法显示图片,后者可以;或者说前者无法找到图片,后者可以找到图片(路径没错)

    可否解答下,或者其他同学懂得的也可以回答下
    展开
     1
     1
  • Geek_295b96
    2019-08-17
    老师,为什么之前的事件,ssr打包以后,没有了响应呢?
     2
     1
  • 刘小宅
    2019-08-13
    为什么我们在做ssr服务器端渲染的时候, 没有在webpack.ssr.js文件的output设置libraryTarget: 'umd',
    则会报错,这个配置在webpack服务器端ssr渲染当中,起的作用是什么, 我们每次进行服务器端渲染的时候,都是需要加上这个配置的吗

    作者回复: 这个是因为做SSR的时候Node.js 需要去 require 我们生成的这个 js 文件,而 Node.js 的包管理遵从 commonjs 规范,因此构建生成的这个 js 文件需要兼容 commonjs,否则无法再 Node.js 里面进行 require。

    服务端渲染的构建都需要这样设置

    
     1
  • developer_hsl
    2019-07-10
    const SSR = require('../dist/search-server');
    console.log(SSR); // undefined
    不知道为什么
     7
     1
  • Geek_4e4ec2
    2020-01-23
    这样打包出来的html最后还是会包含search-server.js,实际上页面加载时已经不需要这个文件了,怎么让它不插入到html中去呢?
    
    
  • 前端路上的小学生
    2020-01-21
    老师,我这里遇到了一个问题,我在实现服务端渲染这个过程的时候,打包出来的文件让server去读取的时候一直提示:can not assign to readonly property....。关键我还把import全改成了require,不知道为什么还出这个错
    
    
  • 拯救不开心
    2019-12-25
    老师您好,请教3个问题
    1,我通过 const logo = require('./assets/author-icon.png') 引入的图片,在页面访问时报错,显示时一个Object对象。
    我尝试打印输出 logo 后,发现是一个对象,图片的路径在 default 属性上。
    最后只能这样使用 <img src={logo.default} />,
    对照了老师的代码后发现,我使用的是 url-loader ,换为 file-loader 后还是不行,请问老师这个怎么解决,不使用 default的情况下。

    2,为什么注释了 optimization,splitChunks相关的配置后,引入的 const SSR = require('../dist/search-server') 才不是 undefined 了?

    3,SSR打包,我记得图片上还有一个点击懒加载脚本的需求,这个怎么实现呢?
    展开
     2
    
  • 大海
    2019-11-06
    打包已经生成umd格式了,为什么还需要前端源代码不能用es6的import
    
    
  • coder
    2019-10-28
    在处理`document`的问题时,有一些操作是多余的。

    在这一行中:

    ````
    const entryFiles = glob.sync(path.join(__dirname, 'src/pages/*/index-server.js'));
    ````
    已经将(并且只将)做SSR的入口文件路径摘取出来了(即包含且仅包含index-server.js文件的路径),其它不准备做SSR的`index.js`自然不会被调用到,所以也不会访问到`document`。这样,后面的操作,包括match入口文件夹名称,以及是否需要加入`htmlWebpackPlugins`的判断都可以不用做了。
    展开
    
    
  • coder
    2019-10-28
    客户端渲染和服务器端渲染的区别,在“可交互”这一条,没太理解彼此的区别,可以稍微展开说说吗?
    
    
  • 刘先森
    2019-10-27
    // webpack.ssr.js
    output: {
        path: path.resolve(__dirname, 'dist'), // set the dir path of output
        filename: '[name]-server.js', // set the name of the bundle filename
        libraryTarget: 'umd',
      },

    //src/search/search-server.js
    const React = require('react');
    const logo = require('./imgs/logo.png');
    require('./css/search.less')
    const a = require('./tree-shaking').a;

    class Search extends React.Component {
      constructor() {
        super(...arguments);
        this.state = {
          Text: null
        }
      }

      loadComponent() {
        import('./text.js').then((Text)=>{
          this.setState({
            Text: Text.default
          })
        })
      }

      render () {
        const {Text} = this.state;
        const funcA = a()
        return <div className="search-text">
          search text test watch { funcA }
          { Text ? <Text /> : null }
          <div>
            dev server
          </div>
          <img onClick={ this.loadComponent.bind(this) } src={ logo }></img>
          </div>
      }
    }
    console.log(Search)

    module.exports = <Search/>;


    打包后的search-server.js 好像没有抛出任何东西?
    // server/index.js

    const SSR = require('../dist/search-server');
    console.log(SSR)

    ssr 是undefined
    展开
    
    
  • 刘先森
    2019-10-27
    const SSR = require('../dist/search-server');
    console.log(SSR)

    ssr怎么是undefined?
    
    
  • D-DRAGON
    2019-10-09
    npm run build:ssr 是生成 dist 文件
    node server/index.js 是走 webpack.prod.js 启动服务器是吗?
    
    
  • 刘彪
    2019-09-17
    有个问题:服务端渲染是不是需要node搭建服务器,用其他语言行吗?

    作者回复: 是的,需要服务器支持。其它语言也是可以的,不过前端开发最好还是使用Node.js作为中间层更加合理点。

    
    
  • 西府海棠
    2019-07-03
    老师为什么加了
      optimization:{
            runtimeChunk: {
                name: 'runtime'
            }
    }
    这个代码打包出来的 search-server就没有东西了
    展开
    
    
  • 西府海棠
    2019-07-03
    讲的东西是真实用,真希望快点😆

    作者回复: 嗯嗯,努力更新中

    
    
  • 菜鸟
    2019-07-02
    老师讲的好棒👍👍期待下一期

    作者回复: 感谢夸奖

    
    
我们在线,来聊聊吧