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/