成功解决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
成功解决react+webpack打包文件过大的问题的更多相关文章
- Nginx开启gzip压缩解决react打包文件过大
用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式 在nginx配置中添加如下 ...
- 14.如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法
问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...
- webpack打包文件中的@符号表示什么意思
在看使用webpack打包的项目代码时,经常会看到在路径中引用@符号 import one from '@/views/one.vue' 那这里的@符号到底表示什么意思呢? 这其实利用了webpack ...
- 解决 webpack 打包文件体积过大
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
- 彻底解决 webpack 打包文件体积过大
http://www.jianshu.com/p/a64735eb0e2b https://segmentfault.com/q/1010000006018592?_ea=985024 http:// ...
- webpack打包文件解析
/** * 对于没有代码分割的,webpack会打包生成main.js一个大的自执行函数 * 函数参数是一个对象,键值分别是路径和模块的函数 * 函数内部定义了一些方法,包括__webpack_req ...
- webpack打包文件
npm init -y//生成package.json npm install webpack webpack-cli --save-dev//安装webpack和webpack-cli根据入口文件. ...
- angular 4 开发环境下打包文件过大
angular 4本地开发环境下,ng server -- port 8080 -o 之后在在浏览器中查看数据请求,其中vendor.bundle.js有8.3mb,而整个传输数据大小为16.3mb ...
- 成功解决android studio打包报错
Win7系统,Android Studio 版本2.3.1,对cpp-empty-test使用了 cocos compile -p android --android-studio,命令 编译打包AP ...
随机推荐
- log4net基础学习
log4net是一个功能著名的开源日志记录组件.利用log4net可以方便地将日志信息记录到文件.控制台.Windows事件日志和数据库(包括MS SQL Server, Access, Oracle ...
- ThinkPHP中浏览器友好输出函数
// 环境常量 define('IS_CLI', PHP_SAPI == 'cli' ? true : false); define('IS_WIN', strpos(PHP_OS, 'WIN') ! ...
- 最全Jenkins+SVN+iOS+cocoapods环境搭建及其错误汇总
前言 持续集成是敏捷开发中重要的一部分,为保证新功能的开发,又保证旧功能的维护,从一个冲刺到下个冲刺.持续集成工具是我们保证开发和维护并行的护航者,现在流行的集成工具有很多,例如: 1.Jenkins ...
- NodeMCU Builder, yet another NodeMCU IDE
最近几天研究基于NodeMCU的Wi-Fi小车,突然之间想要写一个专门开发NodeMCU Lua代码的工具自己用,由于官方已经有了NodeMCU Studio,所以我的就叫NodeMCU Builde ...
- Java8 HashMap源码分析
java.util.HashMap是最常用的java容器类之一, 它是一个线程不安全的容器. 本文对JDK1.8.0中的HashMap实现源码进行分析. HashMap使用位运算巧妙的进行散列并使用链 ...
- selenium 执行js,实现滚动条
今天在写脚本的时候,学习了执行js,实现滚动条,对于scrollTop=10000中这个10000是怎么来的,还不是很了解,先将方法记录一下, 1.滚动条回到顶部: js_up="docum ...
- 学习爬虫的day01
反扒 1.浏览器伪装加一个协议头(即浏览器的协议头) 火狐的浏览器协议头='User-Agent':'Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; r ...
- Numpy入门 - 行列式转置
本章实例讲解如何将一个数组对象进行转置,我们可以使用.T将行列数据颠倒过来,看下面的代码: import numpy as np arr = np.array([[1, 2, 3], [4, 5, 6 ...
- 【转】Cmder--Windows下命令行利器
原文链接:https://www.cnblogs.com/zqzjs/archive/2016/12/19/6188605.html cmder cmder是一个增强型命令行工具,不仅可以使用wind ...
- #openstack centos6 centos7 kvm镜像制作
#openstack centos6 centos7 kvm 镜像制作 openstack windows 2008镜像 制作 http://www.cnblogs.com/elvi/p/800129 ...