好的部署需要做到两点:
1. 性能优化: 包括代码执行速度, 页面载入速度
2. 自动化: 减少重复工作
使用 React+Redux 的时候往往会用到其调试工具 Redux DevTools, 在手动配置 DevTools 时需要针对 Store 和 Component 进行一些配置, 然而这些都是为了方便调试的, 生产环境下我们不希望加入这些东西, 所以建议从代码上隔离 development 和 production 环境:
containers/
Root.js
Root.dev.js
Root.prod.js
...
store/
index.js
store.dev.js
store.prod.js
`</pre>
同时采用单独的入口文件, 比如上面的 containers/Root.js, 按需要加载不同环境的代码
<pre>`if (process.env.NODE_ENV === 'production'){
module.exports = require('./Root.prod');
} else {
module.exports = require('./Root.dev');
}
`</pre>
有一个细节需要注意: ES6 语法不支持在 if 中书写 import 语句, 所以这里采用了 CommonJS 的模块引入方法 require.
另一个需要注意的地方是按需要 import, 否则可能在打包的时候引入不必要的代码
使用 webpack 进行打包工作
<pre>`webpack --config webpack.config.prod.js --progress
`</pre>
注意要为不同的环境准备不同的 webpack 配置文件. 比如 `webpack.config.dev.js` 和 `webpack.config.prod.js` . 看一下比较关键的配置选项
### devtools
启用 source-map, 这样 webpack 会生成两个包
- bundle.js
- bundle.js.map
把用于定位源码的 source map 分离出去, 减少 bundle.js 的体积
source-map 只会在浏览器 devtools 激活时加载, 并不会影响正常页面的饿加载速度.
### plugins
<pre>`plugins:[
new webpack.optimize.UglifyJsPlugin({
compress:{
warning: false
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin()
]
`</pre>
### 不要忽视 NODE_ENV
NODE_ENV 其实就是一个环境变量, 在 Node 中 可以通过`process.env.NODE_ENV`获取, 目前大家汪汪用这个变量区分当前是 development 还是 production.
通过 webpack 的 DefinePlugin 设置环境变量:
<pre>`plugins:[
...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stingify('production')
})
]
### 添加 hash
前端公认的 Best Practice 就是给资源打上 hash 标签, 这对缓存静态资源很有用
1\. 给 bundle.js 添加 hash 标签
`</pre>
output{
path: ...
filename: 'bundle.[hash].js'
}
<pre>`使用 html-webpack-plugin 这个插件自动生成带有
`</pre>
<script src='bundle.[hash].js></script>'的 html 文件
<pre>`配置如下:
`</pre>
plugins:[
...
new HtmlWebpackPlugin({
title:'html title',
template:'./template.html',
favicon: './static/images/logo.ico'
})
]
<pre>`配置 template.html
`</pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="react-container"></div>
</body>
</html>
<pre>`
如果需要在 React Component 中添加图片, 建议采用
`</pre>
import LOGO.png from './static/images/logo.png'
<img src={LOGO.png} alt="" />
<pre>`使用 import 或 require 可以让 webpack 对图片进行打包
使用 file-loader 可以对图片添加 hash 标签然后返回相应的 URLmodule:{
loaders:[
{
test: /.(png|jpg),
loader:”file?name=[hash].[ext]”
}
]
}
1 |
|
