zoukankan      html  css  js  c++  java
  • webpack + react 前端工程化实践和暂不极致优化

    技术结构

    webpack + react + react-router

    功能实现

    关于打包

    1.基于react-router的自定义打包code split。
    2.分包异步按需加载。
    3.CommonsChunkPlugin公共代码打包提取。
    4.ParallelUglifyPlugin多线程代码压缩。
    5.HappyPack多线程loader任务处理。
    6.webpack tree shaking

    开发模式

    1.express + webpack-dev-middleware + webpack-hot-middleware 本地开发服务器和文件修改热加载及实时刷新。
    2.mock数据,data.json进行接口和模拟数据配置,实时生效。
    3.基于nodejs的http模块,实现本地服务器http请求代理转发,开发模式下直接请求测试环境或线上RESTfull api接口。

    业务功能支持

    1.基于react-router的页面跳转控制
    2.可配置的多级菜单组件
    3.基于cookie的权限控制功能
    4.客户端http请求封装
    5.引入element-react、antd两个常用ui组件库(对element-react做了通用代码抽离,antd做了组件按需加载)
    6.集成less

    使用说明

    安装npm依赖

    npm i --save
    
    

    开发模式启动(使用data.json mock数据)

    npm run dev
    
    

    开发模式启动(使用代理转发)

    修改'build/proxy.js'的http option配置(hostname属性和header自定义配置)
    npm run dev --pxy
    
    

    生产环境打包

    'build/config.js'可对打包入口和输出路径做配置。
    npm run build
    

    git地址:https://github.com/IveHD/web-project-go

  • 相关阅读:
    where field in
    看看 高考
    高分的标准
    UCOS-消息邮箱(学习笔记)
    UCOS-互斥信号量(学习笔记)
    UCOS-信号量(学习笔记)
    RVMDK的DEBUG调试-实时数据查看
    OSTimeDelay(1)
    STM32中断控制及优先级设置
    MODBUS-RTU学习
  • 原文地址:https://www.cnblogs.com/ivehd/p/8376004.html
Copyright © 2011-2022 走看看