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

最近在學習並使用webpack+react+antd寫了一個小項目,也能夠說是demo,待所有開發完成後發現webpack的打包文件足足有將近13.3MB,快嚇死寶寶了,通過連續幾天的學習和調試最後將打包文件縮小到665kb,效果十分顯著,網上有許多解決辦法,大多對新手都不是很友好,涉及到的知識點十分的多,致使一步一坑,雖然這邊文章不是最好的,但經過以下的調試縮小其打包文件。css

項目github鏈接 :https://github.com/2016Messi/webpack3-react-router4html

環境參數

react 16.1.1前端

webpack 3.8.1react

antd 3.0.0webpack

react-router-dom 4.2.0git

本文涉及到的解決方案

antd按需加載github

使用webpack壓縮插件:uglifyjs-webpack-pluginweb

使用webpack的新特性:ModuleConcatenationPluginnpm

提取第三方庫 : 兩種方法json

將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

相關文章
相關標籤/搜索