本仓库保存的是 react + redux + react-router + 服务端渲染 的案例, 服务端采用的是 express 框架, 打包工具使用的是 webpack
存在一定的问题, 欢迎提出
一. 克隆仓库
git clone git@github.com:zjy01/react_and_redux_and_router_example.git
cd react_and_redux_and_router_example
二. 安装依赖
npm install
三. 安装webpack(如果没有)
npm install -g webpack
一. 编译\打包文件
npm run server
等待编译完成.
二. 运行 新开控制台窗口,运行下面命令
npm start
三. 访问 浏览器输入 localhost:3000 访问
-- bin
-- www (启动入口)
-- wwwApp.js (webpack 打包 www 后的启动入口)
-- public (静态资源)
-- routes (路由)
-- server.js ( 页面路由 )
-- users.js (接口路由,fetch 请求使用 )
-- views (视图文件)
-- react (react各种文件)
--actions (redux 的 action)
--components (react 的 各个组件 )
--containers (组合 组件的 容器页面, 一般直接用在路由中)
--history (react-router 的 history模块, 需要是引入,可改变 路由地址(跳转))
--reducers (redux 的 reducer)
--routes (路由排版文件)
--selectors (引入reselect, 将store 的 state 变成 props 插入 containers中)
--store (redux 的 createStore 加入中间件后的新函数 )
-- app.js (express 配置入口)
-- package.json (包详情)
-- README.md (说明)
-- webpack.server.config.json (webpack 服务端打包配置文件 )
-- webpack.static.config.json (webpack 客户端打包配置文件 )
心里一直觉得毛毛的, 服务端到底需不需要webpack打包,应该如何打包.
如果不打包, 服务端渲染就会遇到很多问题 ES6语法(例如 import ) 或者 (jsx) 的某些语句无法实现,
打包了感觉整个文件很大, 很乱, 没有找到合适的教程, 希望有人指点
感谢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配置有问题 ? 有什么解决方案
目前正在练习,代码还很乱,之后会不断优化,各种bug如果有解决方法也会更新上来,希望能对个人刚接触react的朋友有所帮助,也希望大神们能指点迷津