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

2024年5月13日 79次阅读 来源: stefanieliang

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
    原文作者：stefanieliang
    原文地址: https://segmentfault.com/a/1190000014545020
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞