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

成功解决react+webpack打包文件过大的问题的更多相关文章

  1. Nginx开启gzip压缩解决react打包文件过大

    用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式 在nginx配置中添加如下 ...

  2. 14.如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法

    问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...

  3. webpack打包文件中的@符号表示什么意思

    在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号 import one from '@/views/one.vue' 那这里的@符号到底表示什么意思呢? 这其实利用了webpack ...

  4. 解决 webpack 打包文件体积过大

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  5. 彻底解决 webpack 打包文件体积过大

    http://www.jianshu.com/p/a64735eb0e2b https://segmentfault.com/q/1010000006018592?_ea=985024 http:// ...

  6. webpack打包文件解析

    /** * 对于没有代码分割的,webpack会打包生成main.js一个大的自执行函数 * 函数参数是一个对象,键值分别是路径和模块的函数 * 函数内部定义了一些方法,包括__webpack_req ...

  7. webpack打包文件

    npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...

  8. angular 4 开发环境下打包文件过大

    angular 4本地开发环境下,ng server -- port 8080 -o 之后在在浏览器中查看数据请求,其中vendor.bundle.js有8.3mb,而整个传输数据大小为16.3mb ...

  9. 成功解决android studio打包报错

    Win7系统,Android Studio 版本2.3.1,对cpp-empty-test使用了 cocos compile -p android --android-studio,命令 编译打包AP ...

随机推荐

  1. 在PostgreSQL自定义一个“优雅”的type

    是的,又是我,不要脸的又来混经验了.我们知道PostgreSQL是一个高度可扩展的数据库,这次我聊聊如何在PostgreSQL里创建一个优雅的type,如何理解优雅?大概就是不仅仅是type本身,其它 ...

  2. springmvc之单元测试(MockMvc)-独立测试

    spring mvc测试框架提供了两种方式,独立安装和集成Web环境测试(此种方式并不会集成真正的web环境,而是通过相应的Mock API进行模拟测试,无须启动服务器) 1.mockMvc.perf ...

  3. Java 浏览器兼容模式

    现在设计的东西,很多浏览器不兼容.下面贴出代码.测试在360和IE浏览器下,可以兼容的 <!doctype html><html><head>    <met ...

  4. scrapy初试水 day02(正则提取)

    1.处理方式 法一 通过HtmlXPathSelectorimport scrapyfrom scrapy.selector import HtmlXPathSelectorclass DmozSpi ...

  5. (12.05)Java小知识!

     今天与大家分享关于抽象类的知识点. 抽象类: 抽象类应用场景:在某种情况下,某个父类只是知道子类应该包含怎样的方法,但无法准确的知道这些子类如何实现这些方法. 从多一个具有相同特征的类中抽象出一个抽 ...

  6. 作为新手,SEO要避免的五大误区

    越来越多人在做网站的时候关注的不是网站的界面,而是网站的seo排名.Seo其实没有我们相信中的那么简单,特别对于新手,在实际操作过程中很容易遇到一些误区,今天我们简单说说新手要避免的五大seo误区. ...

  7. jquery获取iframe页面的元素

    $("#iframe_id").contents().find("#iframe_page_id").val(); 其中,iframe_id是页面引用的ifra ...

  8. 访问者模式(Visitor)

    访问者模式(Visitor) 访问者模式把数据结构和作用于结构上的操作解耦合,使得操作集合可相对自由地演化.访问者模式适用于数据结构相对稳定算法又易变化的系统.因为访问者模式使得算法操作增加变得容易. ...

  9. 百度OCR文字识别-身份证识别

    简介 一.介绍 身份证识别 API 接口文档地址:http://ai.baidu.com/docs#/OCR-API/top 接口描述 用户向服务请求识别身份证,身份证识别包括正面和背面. 请求说明 ...

  10. Mysql服务器SQL模式 (官方精译)

    MySQL服务器可以在不同的SQL模式下运行,并且可以根据sql_mode系统变量的值对不同的客户端应用不同的模式.DBA可以设置全局SQL模式以匹配站点服务器操作需求,并且每个应用程序可以将其会话S ...