【上线】一个简单的前端上线流程

1.生产构建

对生产环境的构建包括合并、抽取、压缩、调试方面。

• 合并：将style和Javascript文件进行合并；
• 抽取：样式从Javascript中抽取出来；
• 压缩：JS、CSS的压缩；
• 调试：开启sourceMap

JS压缩：

//安装
npm install -D uglifyjs-webpack-plugin
//配置webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyJsPlugin()
]
}

参考资料：UglifyjsWebpackPlugin

CSS压缩：

//webpack.config.js
{
loader: 'css-loader',
options: {
minimize: true
}
}

//webpack.config.js
// 小技巧 ：在 css-loader 后边加 ?minimize 即可
loaders: {
css: ExtractTextPlugin.extract({use: 'css-loader?minimize!px2rem-loader?remUnit=40&remPrecision=8', fallback: 'vue-style-loader'}),
scss: ExtractTextPlugin.extract({use: 'css-loader?minimize!px2rem-loader?remUnit=40&remPrecision=8!sass-loader', fallback: 'vue-style-loader'})
}

参考资料：minimize

开启sourceMap:
开启 sourceMap ，npm run build 后会生成 xxx.js.map / xxx.css.map 文件，此文件也要上线，便于错误查找。

//配置webpack.config.js
module.exports = {
devtool:'source-map',
plugins: [
new UglifyJsPlugin({
sourceMap:true
})
]
}

参考资料：sourceMap

2.发布部署

简单包括提交、部署、开启gzip压缩、更新CDN。

• 提交：使用git提交代码，管理线上版本；
• 部署：php/java等从git仓库拉取代码，通过小流量、跨机房、全量部署（一般由运维操作）；
• 开启gzip压缩：JS/CSS开启gzip压缩（比webpack压缩率高得多）；
• 更新CDN：不要忘记更新CDN