[Webpack 2] Optimize React size and performance with Webpack production plugins
2016-06-25 01:51
477 查看
You can fine tune several webpack plugins to make your bundle as small as it can be for your specific application. However there are a few things you can do for pretty much every application to make it smaller and run faster. In this lesson we’ll combine several webpack plugins to optimize things for a React application (this is also applicable for non-React applications as well).
First we need to modify the prod scripts from:
to:
Help methods:
First we need to modify the prod scripts from:
"build:prod": "webpack --env.prod -p",
to:
"build:prod": "webpack --env.prod",
Help methods:
plugins: removeEmpty([ // doesn't save anything in this small app. npm@3 mostly takes care of this ifProd(new webpack.optimize.DedupePlugin()), // saves a couple of kBs ifProd(new webpack.LoaderOptionsPlugin({ //Loader plugin only works in webpack 2 minimize: true, debug: false, quiet: true, })), // saves 65 kB with Uglify!! Saves 38 kB without ifProd(new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"', }, })), // saves 711 kB!! ifProd(new webpack.optimize.UglifyJsPlugin({ compress: { screw_ie8: true, // eslint-disable-line warnings: false, }, })), ])
相关文章推荐
- react native
- React Native之携程Moles框架
- React Native之携程Moles框架
- React Native之携程Moles框架
- ReactJs实战-让人沮丧的HelloWorld
- ReactJS学习系列课程(React学习总结)
- ReactJS学习系列课程(组件的生命周期)
- Learn Once ,Write Anywhere —— 从零开始学习React Native(一)搭建环境
- ReactJS学习系列课程(props 组件属性)
- ReactJS学习系列课程(JSX语法)
- React学习资料
- ReactJS学习系列课程附加2(React虚拟DOM分析)
- 《React:引领未来的用户界面开发框架》— —自编教程源码
- React Developer Tools 安装小提示
- reactiveCocoa实践四(过滤)
- reactiveCocoa实践三(信号组合)
- 转: React系统的入门系统
- ReactJS学习系列课程3(React State状态)
- ReactJS学习系列课程2(React环境搭建)
- React Native控件之DrawerLayoutAndroid抽屉导航组件讲解