成功解决react+webpack打包文件过大的问题

2023-08-13 23:45:40

最近在学习并使用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

码农公寓