7中方式来减小webpack bundle体积

使用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大小

• github.com/th0r/webpac…
• github.com/danvk/sourc…

代码分割(Code spliting)

描述

使用webpack你能够将bundle分割成许多更小的模块而且在页面使用的时候才会去加载本页面须要模块。更有甚者，你能够实现模块的异步加载。

实现

以下是代码分割的额外介绍

blog.jakoblind.no/how-code-sp…

---

node:该文件是翻译自国外开发者的博客(感受颇有用，而且在开发中可以用到)

博客地址：blog.jakoblind.no/