【上線】一個簡單的前端上線流程

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