React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28
2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29
3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30
4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31
5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01
6.React多页面应用6(gulp自动化发布到多个环境,生成版本号,打包成zip等)----2018.01.02
7.React多页面应用7(引入eslint代码检查)----2018.01.03
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
当我们项目页面越来越多,依赖越来越多,打包时间会越来越长,那么我们如优化呢?
1.打包性能问题 (涉及很多因素,我们慢慢来)
引入依赖
npm i -D cache-loader
修改 webpack.dev.conf.js
const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置
let config = merge(baseWebpackConfig, {
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name]-[id].js",
publicPath: ''
},
plugins: [
/*设置开发环境*/
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
}
}),
/*设置热更新*/
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /.(js|jsx)$/,
use: [
'cache-loader',
'babel-loader',
],
include: [
path.resolve(__dirname, "../../app"),
path.resolve(__dirname, "../../entryBuild")
],
exclude: [
path.resolve(__dirname, "../../node_modules")
],
},
{
test: /.(css|pcss)$/,
loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
}
]
},
/*设置api转发*/
devServer: {
host: '0.0.0.0',
port: 8080,
hot: true,
inline: true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback: true,
disableHostCheck: true,
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://192.168.12.100:8080/',
secure: false
}
],
/*打开浏览器 并打开本项目网址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;
添加了如下代码
use: [
'cache-loader',
'babel-loader',
],
我们看下效果
没有引入 cache-loader
打包时间
引入 cache-loader
打包时间
减少了3秒,再页面相当多的时候,优化是很明显的!
2.提取公共包
首先我们看下 首页 和 商城页 相同部分很不同部分
几乎一模一样,好! 我们提取公共部分,放入一个组件中
我们在 app-> component -> common 目录下 新建 Seconds.jsx 公共组件
import React from 'react';
class Seconds extends React.Component {
constructor(props) {
super(props);
this.state = {seconds: 0};
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div className="cont">
<div className="top">
<i className="bd_logo1"/>
这是{this.props.title}
</div>
<div className="bottom">
Seconds: {this.state.seconds}
</div>
</div>
);
}
}
export default Seconds;
改造 首页
import React from 'react';
import '../../public/css/index.pcss'
import Seconds from '../common/Seconds'
const Index = () =>
<Seconds title="首页"/>
;
export default Index;
改造商城页
import React from 'react';
import '../../public/css/shop.pcss'
import Seconds from '../common/Seconds'
const Index = () =>
<Seconds title="商城"/>
;
export default Index;
npm run dev 运行看下 是否正常
一切正常
3.开始提取
目标是:
react react-dom 我们打包成 vendor.js 因为他们是第三方部,几乎不会变,除非你升级
组件的公共部分 我们打包成 common.js
组件独立的业务代码我们打包在对应的js文件中 如 index.js 或 shop.js
改造
config -> webpack -> webpack.base.conf.js
const json = require('../../package.json');//引进package.json
const newEntry = {
'index': './entryBuild/index.js',
'shop': './entryBuild/shop.js',
};
newEntry.vendor = Object.keys(json.dependencies); //把 package.json dependencies字段的值放进 vendor中
let config = {
entry: newEntry,
resolve: {
extensions: [".js", ".json", ".jsx", ".css", ".pcss"],
}
};
module.exports = config;
改造
config -> webpack -> webpack.dev.conf.js
const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置
let config = merge(baseWebpackConfig, {
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name]-[id].js",
publicPath: ''
},
plugins: [
/*设置开发环境*/
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
}
}),
/*设置热更新*/
new webpack.HotModuleReplacementPlugin(),
/* common 业务公共代码,vendor引入第三方 */
new webpack.optimize.CommonsChunkPlugin({
name: ["common", "vendor"],
}),
/* 防止 vendor hash 变化 */
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
],
module: {
rules: [
{
test: /.(js|jsx)$/,
use: [
'cache-loader',
'babel-loader',
],
include: [
path.resolve(__dirname, "../../app"),
path.resolve(__dirname, "../../entryBuild")
],
exclude: [
path.resolve(__dirname, "../../node_modules")
],
},
{
test: /.(css|pcss)$/,
loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
exclude: /node_modules/
},
{
test: /.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
}
]
},
/*设置api转发*/
devServer: {
host: '0.0.0.0',
port: 8080,
hot: true,
inline: true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback: true,
disableHostCheck: true,
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://192.168.12.100:8080/',
secure: false
}
],
/*打开浏览器 并打开本项目网址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;
添加了如下代码
/*设置热更新*/
new webpack.HotModuleReplacementPlugin(),
/* common 业务公共代码,vendor引入第三方 */
new webpack.optimize.CommonsChunkPlugin({
name: ["common", "vendor"],
}),
/* 防止 vendor hash 变化 */
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
}),
改造 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/manifest.js></script>
<script type=text/javascript src=js/vendor.js></script>
<script type=text/javascript src=js/common.js></script>
<script type=text/javascript src=js/index.js></script>
</body>
</html>
添加了如下代码
注:顺序不能变
改造 shop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/manifest.js></script>
<script type=text/javascript src=js/vendor.js></script>
<script type=text/javascript src=js/common.js></script>
<script type=text/javascript src=js/shop.js></script>
</body>
</html>
注:顺序不能变
发现没有 其实 index.html 和 shop.html 两个页面 很像 很像 是不是? 我们会再后面自动化生成页面中 来解决这个问题,就不用手动去新建了!
npm run dev 看下效果
没提取之前
提取之后
一切正常
- 有趣的算法(一)——n阶层尾部有几个0
- Singal Page App:使用Knockout和RequireJS创建高度模块化的单页应用引擎背景知识文档结构服务端API准备Require配置与系统配置模块中的工作模块间的工作烂图赏鉴代码送上
- Canvas 图片绕边旋转的小动画
- 探寻ASP.NET MVC鲜为人知的奥秘(3):寻找多语言的最佳实践方式
- 探寻ASP.NET MVC鲜为人知的奥秘(2):与Entity Framework配合,让异步贯穿始终
- Canvas 剪切图片
- 探寻ASP.NET MVC鲜为人知的奥秘(1):对LESS的支持
- Canvas 图片平铺设置
- Canvas 给图形绘制阴影
- State模式的经典应用场景:订单处理(c#实现)场景描述遇到问题解决问题走起
- ASP.NET SignalR 2.0入门指南介绍SignalRSignalR和WebSocket传输和回滚HTML5 传输协议Comet transports传输协议选择过程监测传输指定传输协议连接
- ASP.NET5之客户端开发:Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用Grunt和Gulp使用Grunt准备项目配置NPM配置Grunt集成起来监测文件变化与V
- 有趣的算法(三)——Hash算法
- JavaScript中的数据类型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Objective-C的hook方案/ Method Swizzling
- Python爬虫:无账号无限制获取企查查信息
- Spark Streaming——Spark第一代实时计算引擎
- bamtools分割bam文件
- 在genome browser中添加自己的注释文件
- 原理+代码|Python基于主成分分析的客户信贷评级实战
- Python办公自动化 | 从PPT到Word
- linux命令行参数getopts参数二选一
- 黎巴嫩首都爆炸能量有多大?物理学家看视频计算:300吨TNT!
- OracleDG 环境主备业务数据不同步备库报ORA-600错误的处理过程
- Xcode清理模拟器文件
- 【Android 音视频开发打怪升级:FFmpeg音视频编解码篇】六、FFmpeg简单合成MP4:视屏解封与重新封装
- 32.opengl高级光照-延迟着色法
- Tsunami:一款功能强大的通用网络安全扫描工具
- Hive查看表/分区更新时间