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

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