原因主要還是React打包生成的.js文件過(guò)大耻台，導(dǎo)致訪問(wèn)的速度很慢诚欠，所以要想辦法壓縮.js文件的大小。
這是項(xiàng)目部署時(shí)草丧，各個(gè)文件的大小狸臣。
app.js的文件達(dá)到了1400多kb，騰訊云的訪問(wèn)速度大概需要15~20s（首屏渲染時(shí)間超過(guò)1.5s都是不能忍的）昌执。
拋開(kāi)代碼內(nèi)部可優(yōu)化的問(wèn)題烛亦，主要是因?yàn)槭褂昧薬ntd-design的庫(kù)（已經(jīng)使用了antd-design的按需加載）诈泼，這個(gè)東西挺大的。
下圖是我在使用按需加載之后煤禽，且把a(bǔ)ntd-design的打包至vender.js中后的結(jié)果铐达。
app.js明顯減小，但vender.js明顯增大檬果。
這個(gè)問(wèn)題瓮孙，暫時(shí)還沒(méi)找打很好的解決方法，下面把自己打包的配置記錄一下（查閱了很多資料选脊，做個(gè)記錄）杭抠。
1 優(yōu)化思路
- 前臺(tái)js代碼壓縮
- 后臺(tái)優(yōu)化
2 前臺(tái)優(yōu)化方法
1 壓縮時(shí)去掉js所有注釋?zhuān)╟opyright信息。
在webpack.config.js文件的plugins數(shù)組里面添加及配置插件即可恳啥。
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false, // remove all comments
},
compress: {
warnings: false
}
})
2 將React切換到產(chǎn)品環(huán)境偏灿，參考如下：
在plugins里面添加：
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
這時(shí)候注意打包的時(shí)候要帶上node的環(huán)境設(shè)置，例如：
NODE_ENV=production webpack --config webpack.production.config.js --progress
3 分離css
先安裝webpack插件：
npm install extract-text-webpack-plugin --save
在webpack配置文件中使用插件：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
loaders:[
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
},
...
...
plugins: [
...
new ExtractTextPlugin("bundle.css")
]
4 分離出業(yè)務(wù)代碼和第三方庫(kù)
entry: {
bundle: path.join(__dirname, '../src/index'),
vendor: ['react', 'react-dom', 'jquery','react-router']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
]
附上完整的webpage配置文件：
var webpack = require("webpack");
var path = require('path');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname); // 項(xiàng)目跟路徑
var APP_PATH = path.resolve(ROOT_PATH, 'app'); // 項(xiàng)目開(kāi)發(fā)目錄src
var APP_FILE = path.resolve(APP_PATH, 'index.jsx'); // 項(xiàng)目入口的index.js
var DIST_PATH = path.resolve(ROOT_PATH, 'dist'); // 項(xiàng)目打包輸出路徑
module.exports = {
entry: {
app: APP_FILE,
venders: [
'react',
'react-dom',
'react-router',
'antd',//這里直接會(huì)把所有antd打包
]
},
output: {
path: DIST_PATH,
//表示資源的發(fā)布地址钝的，當(dāng)配置過(guò)該屬性后翁垂，打包文件中所有通過(guò)相對(duì)路徑引用的資源都會(huì)被配置的路徑所替換
//publicPath: '/',
filename: '[name].js',
chunkFilename: 'js/[name].[chunkhash:5].min.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'less'])
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0']
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=image/[hash:8].[name].[ext]'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.json', '.less']
},
plugins: [
// new webpack.ProvidePlugin({ $: "jquery" }), // 這是將jquery變成全局變量，不用在自己文件require('jquery')了
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production') //定義生產(chǎn)環(huán)境
}
}),
new webpack.optimize.CommonsChunkPlugin('venders', 'venders.js'), // 這是妮第三方庫(kù)打包生成的文件
new uglifyJsPlugin({
output: {
comments: false, // remove all comments
},
compress: {
warnings: false
}
}),
// new webpack.optimize.DedupePlugin(), //刪除類(lèi)似的重復(fù)代碼
// new webpack.optimize.UglifyJsPlugin(), //最小化一切
// new webpack.optimize.AggressiveMergingPlugin(),//合并塊
// new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin("[name].css"),
new HtmlWebpackPlugin({
template: './app/index.tmpl.html', // html模板路徑
htmlWebpackPlugin: {
files: {
css: ["app.css"],
js: ["bundle.js", "venders.js"]
}
},
minify: {
removeComments: true, // 移除HTML中的注釋
collapseWhitespace: true, // 刪除空白符與換行符
removeAttributeQuotes: true // 移除HTML中的屬性引號(hào)
},
filename: 'index.html',
})
]
};
package.json打包命令扁藕。
"scripts": {
"start": "set NODE_ENV=dev && webpack-dev-server --progress --colors",
"build": "rimraf dist/* && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --colors",
"mock": "node --harmony ./app/common/mock.js"
},
參考鏈接
https://www.cnblogs.com/wangyue99599/p/8136108.html
https://blog.csdn.net/xuelang532777032/article/details/65635188
https://blog.csdn.net/code_for_free/article/details/51583737
https://blog.csdn.net/wu_shuxuan/article/details/78902772
