Redux服务端渲染及webpack优化

scripts: {    "server": "nodemon server.js --exec babel-node",    ...  }</pre>    </div>      
 2、服务端的react-router和客户端的用法完全不同，看了它的github主页才知道 地址 用到了 match 和 RouterContext 这两个api 
      
 3、服务端用了express。然后发现怎么都加载不进静态资源，然后想起要加入 app.use(express.static(path.join(__dirname, 'build'))); 
      
 重新执行命令，发现能够加载静态文件了。但是发现服务端渲染的内容不对，渲染的内容跟客户端渲染的一样。然后发现是我的build目录下有生成的Index.html文件，express默认去加载了那个文件，而没有用吐出的内容。找到原因就好做了，在app.use中加入第一个参数路径即可 app.use('/build', express.static(path.join(__dirname, 'build'))); 
      
 4、 this.props.items.toArray is not a function 的报错，原因定位是靠 window.__INITIAL_STATE__ 获取的state是原始的js对象，因为项目用了immutableJs，需要转换成immutable对象。 直接 Immutable.fromJS(window.__INITIAL_STATE__) 发现还是不行，redux只接受键值跟原本一样的。于是要改成这样： 
      
     
if(initialState) {   Object.keys(initialState).forEach(key => {    initialState[key] = fromJS(initialState[key])   })  }</pre>    </div>      
顶级的不变，只把值变成immutable data
      
 5、 Warning: React attempted to reuse markup in a container but the checksum was invalid...... (client) "><a class="" href="#Home" data-reactid= (server) "><a class="" href="Home" data-reactid=" 
      
如上的错误提示，是服务端渲染出来的跟客户端预期渲染的不一样，最后定位是客户端用的是 ‘history/lib/createHashHistory’导致的，换成’history/lib/createBrowserHistory’问题解决
      
     
 换成createBrowserHistory后，在浏览器直接打开index.html会报 Failed to execute 'replaceState' on 'History' 看来是谷歌新版的安全策略 
      
      
 6、控制台中打印的 Download the React DevTools for a better development experience: https://fb.me/react-devtools 如果需要去掉，则在webpack.config.js中加入 
      
     
plugins: [    new webpack.DefinePlugin({     'process.env': {      NODE_ENV: '"production"'     }    })  ]</pre>    </div>      
客户端
      
客户端的改动并不大，在createStore前，获取window.__INITIAL_STATE__作为initialState。其他不用做改动
      
     
const initialState = window.__INITIAL_STATE__;  if(initialState) {   Object.keys(initialState).forEach(key => {    initialState[key] = fromJS(initialState[key])   })  }  const store = configureStore(initialState);</pre>    </div>      
以上大体就是redux在服务端渲染的应用，但目前还没有对于api请求这一点，之后会再慢慢完善
      
webpack的优化
      
babel5到6之后，用es6写东西，webpack打包起来慢啊，webpack真的可以说是前端的带薪编译…… 我们只能尽量去优化一些了
      
1、用alias别名
      
     
alias: {    'react': path.resolve(PATHS.node_modules, 'react/dist/react.js'),    'react-dom': path.resolve(PATHS.node_modules, 'react-dom/dist/react-dom.js'),    'react-redux': path.resolve(PATHS.node_modules, 'react-redux/dist/react-redux.js'),    'react-router': path.resolve(PATHS.node_modules, 'react-router/lib/index.js'),    'redux': path.resolve(PATHS.node_modules, 'redux/dist/redux.js')  }</pre>    </div>      
 直接指明路径，免去硬盘搜索的时间浪费。其实这里本应该指向压缩后的文件，但是在 additional chunk assets 这一步会卡到20多秒，去google了下，发现是说 UglifyJSPlugin 接受压缩的文件会让webpack执行得十分慢。所以alias这里没引用压缩后的文件 
      
2、不打包react和react-dom，而是全局引用
      
去掉alias中的react和react-dom
      
     
resolve: {   alias: {   // 'react': path.resolve(PATHS.node_modules, 'react/dist/react.js'),   // 'react-dom': path.resolve(PATHS.node_modules, 'react-dom/dist/react-dom.js'),    'react-redux': path.resolve(PATHS.node_modules, 'react-redux/dist/react-redux.js'),    'react-router': path.resolve(PATHS.node_modules, 'react-router/lib/index.js'),    'redux': path.resolve(PATHS.node_modules, 'redux/dist/redux.js')   }  }</pre>    </div>      
webpack配置文件中加上
      
     
externals: {    'react': 'React',    'react-dom': 'ReactDOM'  }</pre>    </div>      
然后去node_modules/html-webpack-template/index.html中加上react和react-dom的CDN引用（服务端渲染的也要记得加上）
      
vendors由原来的376KB变成了247KB.
      
3、提取css
      
 用 ExtractTextPlugin 这个插件，至于怎么使用，可以看github项目文件了 
      
4、清理build文件夹
      
 用 CleanPlugin ，每次build的时候，清理一下build文件夹 
      
     
 服务端改进了下，加了compress，用了ejs的模板引擎，这个项目会慢慢地去完善它，再次祭出地址 github传送门 
      
      
     
 ← Previous Post 
      
   </code></code></code></code></code></code></code></div>

                    

                

                

                    

                        

                            
相关经验

                        
                        

                            
 Redux服务端渲染及webpack优化
                            
 Redux服务端渲染及webpack优化
                            
 webpack使用优化
                            
 webpack使用优化