成功解決react+webpack打包文件過大的問題（時間已久，不建議繼續閱讀）

最近在學習並使用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