使用Webpack4并启用production模式
描述
该方式对于开发者模式是很有必要的。该模式会自动将剔除空格、新的行，还有没有用到的代码。并且该模式下会将一些公共库例如React的调试代码排除在外。
实现
在进行项目打包的时候，针对webpack使用-p的标签同时--mode production。
webpack -p --mode production 复制代码
上面的代码的作用
- 使用UglifyJS对bundle进行体积减少
- 将
NODE_ENV设置为production模式
处理lodash.js
描述
如果在项目中使用了lodash.js，可以采用lodash-webpack-plugin插件。该插件将会移除你未用到的特性。
实现
在webpack.config配置文件中的plugin的选项中，加入
new LodashModuleReplacementPlugin 复制代码
note 将该插件在文件的头部引入
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); 复制代码
利用NPM进行库的安装
npm install lodash-webpack-plugin --save-dev 复制代码
处理moment.js
描述
如果你在项目中使用了moment.js，该库默认将所有时区的数据存入项目中。所以有些没有用到的时区数据在打包的时候，就会增加bundle的体积。在使用该库的时候，需要明确哪几个时区的数据是需要的。
实现
在webpack.config配置文件中的plugin的选项中，加入
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/,/nb/), 复制代码
nb为你所使用的时区的code。
作用域提升(Scope hoisting)
描述
Scope hoisting使用最快的方式将modules添加到bundle中。 特点：
- 加快js在浏览器的执行速度
- 减少bundle的体积
实现
在webpack.config配置文件中的plugin的选项中，加入
new wepback.optimize.ModuleConcatenationPlugin() 复制代码
该特性需要webpack3+。
Tree shaking
描述
Tree shaking会将bundle中一些僵尸代码(dead code)移除。僵尸代码是模块被导出，但是没有地方引入。
实现
使用ES6的模块语法
在项目代码中尽可能的使用ES6模块并且使用模块名引入。 推荐语法：
import {connect} form 'react-redux'; 复制代码
错误语法：
import reactRedux from "react-redux"; 复制代码
配置.babel.rc
向.babel.rc中新增modules:false的配置信息 如果在babel配置文件中使用了es2015。配置如下
presets:[ ["es2015",{"modules":false}] ] 复制代码
如果使用了babel-preset-env。
presets:[ ["env":{"modules":false}] ] 复制代码
note上述的配置针对webpack2+。
使用可视化工具来分析bundle大小
代码分割(Code spliting)
描述
使用webpack你可以将bundle分割成许多更小的模块并且在页面使用的时候才会去加载本页面需要模块。更有甚者，你可以实现模块的异步加载。
实现
如下是代码分割的额外介绍
blog.jakoblind.no/how-code-sp…
node:该文件是翻译自国外开发者的博客(感觉很有用，并且在开发中能够用到)
博客地址：blog.jakoblind.no/
