最近在學習並使用webpack+react+antd寫了一個小項目，也可以說是demo，待全部開發完成後發現webpack的打包文件足足有將近13.3MB，快嚇死寶寶了，經過連續幾天的學習和調試最後將打包文件縮小到665kb,效果十分顯著，網上有許多解決辦法，大多對新手都不是很友好，涉及到的知識點十 ...
最近在學習並使用webpack+react+antd寫了一個小項目，也可以說是demo，待全部開發完成後發現webpack的打包文件足足有將近13.3MB，快嚇死寶寶了，經過連續幾天的學習和調試最後將打包文件縮小到665kb,效果十分顯著，網上有許多解決辦法，大多對新手都不是很友好，涉及到的知識點十分的多，導致一步一坑，雖然這邊文章不是最好的，但通過如下的調試縮小其打包文件。
項目github連接 ：https://github.com/2016Messi/webpack3-react-router4
環境參數
react 16.1.1
webpack 3.8.1
antd 3.0.0
react-router-dom 4.2.0
本文涉及到的解決方案
antd按需載入
使用webpack壓縮插件：uglifyjs-webpack-plugin
使用webpack的新特性：ModuleConcatenationPlugin
提取第三方庫 ： 兩種方法
將devtool更改為生產環境
1 antd按需載入
antd 是ant-design的縮寫，是螞蟻金服的一款基於react的前端 UI組件，不做過多介紹，總之很強大
在antd官網（當前頁面向下拉）的組件中有介紹按需載入的使用，這裡在寫一遍：
使用babel-plugin-import插件
1.1 方法一 (推薦)
1 安裝插件 npm install --save-dev babel-plugin-import
2 在根目錄下創建.babelrc文件，並把以下代碼填入
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 會載入 less 文件
]
}然後只需從 antd 引入模塊即可，無需單獨引入樣式。等同於下麵手動引入的方式
// babel-plugin-import 會幫助你載入 JS 和 CSS
import { DatePicker } from 'antd';此時此刻這段代碼也可以註釋掉了 import 'antd/dist/antd.css';
1.2 方法二
手動引入
import DatePicker from 'antd/lib/date-picker'; // 載入 JS
import 'antd/lib/date-picker/style/css'; // 載入 CSS
// import 'antd/lib/date-picker/style'; // 載入 LESS通過antd的按需載入成功將打包文件從13.3MB縮小到7.73MB
2 使用webpack壓縮插件
1 安裝
npm i -D uglifyjs-webpack-plugin
2 使用
//在webpack.config.js文件中做如下配置
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
plugins: [
new UglifyJSPlugin()
]通過代碼壓縮的方式成功將打包文件從7.73MB縮小到7.7MB
3 使用webpack的新特性：ModuleConcatenationPlugin
webpack3.0以上版本新增了一個特性，ModuleConcatenationPlugin，具體效果太過複雜不做過多的介紹，只要能縮小打包文件就足夠了，並且沒有其他影響
使用方法
//直接在webpack.config.js中寫入如下代碼即可
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]通過上述方法的修改，成功將打包文件從7.7MB縮小到7.47MB
4 提取第三方庫
webpack 在打包過程中，也會將react react-dom react-router 等相關文件一起打包到文件中
4.1 方法一
在webpack.config.js中做如下配置
entry: {
bundle :__dirname + "/src/js/root.js", //已多次提及的唯一入口文件
vendor: ['react','react-dom','react-router-dom','react-responsive'] //在此處配置
}
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js'
}),
]經過上面的配置後對應的文件夾中會生成vendor.bundle.js文件，該文件就是公共模塊(但是每次打包都會生成公共模塊)，此時還需在html文件中將公共模塊引入，註意：公共模塊要放在前面
經過如上配置成功將打包文件從7.47MB縮小至5.04MB
4.2 方法二（推薦）
1 在根目錄下創建webpack.dll.config.js文件,並填寫如下配置
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
bundle: ['react','react-dom','react-router-dom','react-responsive'] //提取公共模塊
},
output: {
path: path.join(__dirname, 'src/js'),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'src/js','[name]-manifest.json'),
name: '[name]_library'
})
]
};
2 在 webpack.config.js中做如下配置
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./src/js/bundle-manifest.json')
}),
3 執行 --config webpack.dll.config.js
4 執行 webpack --config webpack.config.js
此時目錄下會出現兩個文件 bundle-manifest.json 和 bundle.dll.js（公共模塊），接下來每次只需打包業務邏輯的代碼就可以了，若公共模塊版本更新 再次執行 第4步即可。
html目錄引用
//註意公共模塊要放在前面
<script src="/src/js/bundle.dll.js"></script>
<script src="http://localhost:8080/bundle.js"></script>經過上述方法處理後成功將打包文件從7.47MB縮小至5.08MB
5 將開發環境改為生產環境
將webpack.config.js中的devtool 設置為 false
devtool: 'false'此時此刻碩大文件突然就從5.08MB變為了665kb
