说明
不知不觉, 接触react已经一个月了, 真心觉得react很神奇, 也很复杂, 这一个月来, 在社区请教收获了很多 ,利用实习的空余时间, 终于捣鼓出了一个比较完整的 react实例.
react_and_redux_and_router_example
在这个实例中, 使用了 react / redux / react-router / 服务端渲染 等等的一些模块, 欢迎各位clone查看, 也可以star一下, 以后有新的学习心得也会更新上去,希望对大家有帮助 , github中有文件说明
期间参考的资源有
Redux 中文文档
React Router 中文文档
玩转 React 服务器端渲染
等等…
请教
一. 服务端打包
心里一直觉得毛毛的, 服务端到底需不需要webpack打包,应该如何打包.
如果不打包, 服务端渲染就会遇到很多问题 ES6语法(例如 import ) 或者 (jsx) 的某些语句无法实现,
打包了感觉整个文件很大, 很乱, 没有找到合适的教程, 希望有人指点
二. __dirname
感谢react中文社区的 oneapm
(已解决,在webpack配置文件上添加以下配置即可 )
module.exports = {
node: {
__filename: true,
__dirname: true
}
}
(现在已经正常使用了 ejs 视图模板引擎 和 静态文件 了)
这也是服务端使用webpack 打包遗留的问题, __dirname在服务器很常使用, 例如在 express 中,
app.use('/public',express.static(__dirname + '/public'));
用来设置静态文件路由
app.set('views', path.join(__dirname, 'views'));
用来设置视图模板路径
然而, 利用webpack 打包后,
console.log(__dirname);// 等于'/'
console.log(__filename);// 等于'/index.js'
这对我造成很大的困扰,无法使用静态文件(css,js),也无法使用视图模板, 最终只能新开一个服务器输送静态文件, 也只能直接输出视图字符串
不知是不是我哪里造成了错误,或者有什么解决方案
三. 文件过大的问题
优化一
(已解决, 原来的配置文件添加了devtool: ‘eval’, 使得所有注释都无法删除,删掉降到了296k)
结果
Time: 6312ms
Asset Size Chunks Chunk Names
bundle.js 293 kB 0 [emitted] bundle
+ 257 hidden modules
优化二
使用了 @wyvernnot 的 webpack_performance, 一篇webpack优化的文章,
利用 DefinePlugin 消除环境监测的代码 if (process.env.NODE_ENV !== ‘production’) 之类的.
在plugins 加上相应配置,如下:
plugins:[
...
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
})
]
然后在执行webpack的时候加上NODE_ENV环境变量
NODE_ENV=production webpack --config webpack.static.config.js
结果
Time: 6738ms
Asset Size Chunks Chunk Names
bundle.js 276 kB 0 [emitted] bundle
+ 256 hidden modules
这个时候发现减少了 10多k (一分钱也是肉 -_-)
然而, 还有更加神奇的事
运行webpack 的时候加上–optimize-minimize(就是压缩指令)
NODE_ENV=production webpack --config webpack.static.config.js --optimize-minimize
结果
Time: 9200ms
Asset Size Chunks Chunk Names
bundle.js 222 kB 0 [emitted] bundle
+ 252 hidden modules
又节省了50多k, 加起来足足缩小了70k.
虽然明明我的配置里已经有了压缩插件, 却还是需要用 --optimize-minimize来配合DefinePlugin 去压缩, 确实很神奇呢
(原问题)
静态js资源|打包丑化完成后,足足有1M大小,不得了啊, 到底是什么原因: 引入文件过多? webpack配置有问题 ? 有什么解决方案
btw, 希望大家一起进步
