成功解决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

上一篇:浅谈API设计


下一篇:linux下挂载新硬盘