估计是太重了吧
一个完整的React项目下来后的总结
业界第一个基于react的业务系统? 有点夸夸其谈了吧。我们开发的是后台数据系统,使用的是react+webpack+alt+ant-design+react-router,也是用atom作为开发工具,ImmutableJS目前还没有引进来,下一步准备进入,并跟风一下火到没朋友的redux。服务端采用nginx代理后,加载速度提升了很多,加载文件大小在300KB左右。
感觉楼主好屌!~膜拜啊~~~但是对于还是react菜鸟的我,有好多问题想问。。。在这里可不可以向你请教一个webpack的打包问题呢?我现在是准备用 react+react-router+redux+webpack来练习搭建一个项目,但是webpack的时候出现了好多warning…而且webpack打包之后的文件居然后5M差不多,太恐怖了,我的源代码才1、2 K 啊…好希望您能够帮忙看一下这个问题…
我的webpack.config.js是这样的:
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./app'
],
output: {
path: path.join(__dirname, 'build'),
filename:'bundle.js'
},
resolve: {
//root: path.resolve('./app'),
modulesDirectories: ['node_modules', 'app'],
extensions: ['','.js']
},
module:{
loaders: [
{
test:/\.jsx?$/,
exclude:/node_modules/,
loaders:[
'react-hot','babel?presets[]=react,presets[]=es2015'
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin()
]
};
然后 webpack -p 之后就出现了下面这么多警告了,打包出来的bundle.js文件居然5M那么大…
WARNING in bundle.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Dropping side-effect-free statement [./~/react-router/lib/deprecateObjectPropert
ies.js:65,0]
Side effects in initialization of unused variable _ret [./~/react-router/lib/dep
recateObjectProperties.js:63,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]
Dropping unreachable code [./~/react/lib/shouldUpdateReactComponent.js:40,0]
Condition always true [./~/react/lib/traverseAllChildren.js:158,0]
Condition always true [./~/react-router/lib/Redirect.js:97,0]
Side effects in initialization of unused variable _reactRouter [./modules/App.js
:2,0]
Condition always true [./~/react-router/lib/IndexRedirect.js:58,0]
Condition always true [./~/react-router/lib/IndexRoute.js:55,0]
Condition always true [./~/react-router/lib/Route.js:50,0]
Dropping side-effect-free statement [./~/react-router/lib/getComponents.js:49,0]
Side effects in initialization of unused variable _ret2 [./~/react-router/lib/ge
tComponents.js:47,0]
Condition always true [./~/react-router/~/history/lib/createMemoryHistory.js:67,
0]
Condition always true [./~/react/lib/ReactDOMComponent.js:907,0]
Dropping side-effect-free statement [./~/react/lib/ReactEventListener.js:72,0]
Dropping unused function handleTopLevelWithPath [./~/react/lib/ReactEventListene
r.js:98,0]
Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [./~/react/lib/ReactEventLi
stener.js:26,0]
webpack配置文件一般有2个 一个开发环境 一个生成环境 你把webpack-dev-server / react-hot / HotModuleReplacementPlugin打包进去 肯定文件很大
楼主可以试试我的data-flex.css,直接在属性里使用data-flex来实现flex布局,在react里结构清晰,调整布局时,无需改动csshttps://github.com/1340641314/flex
我做的一个react小程序就是基于data-flex.css布局的:https://github.com/1340641314/react-kelink
杭州靠谱机会–前端工程师:
要求熟悉ReactJS 框架和WebPack。
上班地址:杭州-滨江区–江虹创意园
薪资:10-20K(优秀另议)
有意欢迎小窗联系我,谢谢!
514535292@qq.com
devtool里的inlice-source-map也会占用空间。souce-map的作用是在你debug的时候,方便你看babel编译之前的代码。我觉得小项目,不如用souce-map,看得最清楚。