在Flutter 开发中混合的形式主要有两种

• 作为独立的页面 进行维护
• 可以相互嵌套

 

 原生集成 Flutte 混合开发的步骤：

1. 创建 Flutter module
2. 添加 Flutter module 依赖（为原生项目添加 Flutter 依赖）
3. 在 Java/Object-c 中调用 Flutter module
4. 编写 Dart 代码

➠ 运行项目

➠ 热重启 / 热加载

➠ 调试代码

➠ 发布应用

Android:

1. 创建 Flutter module 

首先你得有 原生 android 工程; 路径如下：D:\MineGit\flutter_trip\native_peoject

 首先切换到 原生工程的上一级目录；并且 创建一个flutter模块

C:\Users\user>D:
C:\Users\user>cd D:\MineGit\flutter_trip\native_peoject
D:\MineGit\flutter_trip\native_peoject>cd..
D:\MineGit\flutter_trip>flutter create -t module flutter_module_john

  像这样 flutter  模块就建好了：

文件结构如下：

 上面就是 flutter_module_john 模块中的文件结构; 你会发现它里面包含 .android 与 .ios，这两个文件夹是 隐藏文件夹（mac 中你必须打开隐藏开关 才能看到文件夹），也是 flutter_module_john 宿主工程：

• .android            -> flutter_module_john模块  的Android 宿主工程
• .ios                    -> flutter_module_john模块 的 IOS 宿主工程
• lib                      -> flutter_module_john模块 的 Dart 部分的代码
• pubspec.yaml   -> flutter_module_john模块 项目依赖配置文件

因为宿主工程的存在， 我们这个 flutter_module 在补额外配置的情况下是 可以独立运行 的， 通过安装了 Flutter 与 Dart 插件的 AndroidStudio 打开这个 Flutter_module 项目，通过运行按钮就能直接运行它

能顺利运行到手机上面 就说明这个模块 创建的没问题

2. 添加 Flutter module 依赖

这里我们将 刚刚创建的 Flutter_module 加入到 Android 原生工程中：

1. settings.gradle 首先我们修改项目

setBinding(new Binding([gradle:this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module_john/.android/include_flutter.groovy'
))

就是把 flutter_module 模块添加到 项目中；注意项目路径的写法；得写成你自己的路径；

下面截图中的两行 是编辑器自己给我添加的 可以移除

 检查下 minSdkVersion 版本最低 16（flutter 支持的最低版本）

2.  build.gradle (app)

添加工程依赖

3. 在 Java 中调用 Flutter module

在 Java 中调用 Flutter 模块的两种方式：

1. 使用 Flutter.createView  API 方式创建 （作为页面的一部分）

   Flutter.createView() 已经被官方弃用 Flutter 1.12版本废弃了io.flutter.facade包导致的；这里使用 FlutterFragment 来创建 FlutterFragment.createDefault()；

   

   public class MainActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
   findViewById(R.id.test).setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
           //没有指定路由 传值;只能调到 默认路由（开始界面）
   //        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
   //        fragmentTransaction.add(R.id.someContainer, FlutterFragment.createDefault());
   //        //fragmentTransaction.replace(R.id.someContainer, FlutterFragment.createDefault());
   //        fragmentTransaction.commit();
   
   
           //指定路由并且传值
           FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
                   .initialRoute("{name:'devio',dataList:['aa','bb','bb']}")
                   .build();
           getSupportFragmentManager()
                   .beginTransaction()
                   .replace(R.id.someContainer, flutterFragment)
                   .commit();
       }
   });
       }
   }

   原生传值可以直接 接收到参数：

   import 'dart:ui' as ui;

   final String initParams = ui.window.defaultRouteName;

           编辑的时候：编辑原生原生代码只能修改原生的代码；编辑dart 代码； Flutter_module lib 文件夹里面的代码；直接运行 Flutter_module；只能运行 Flutter_module里面的工程；

4. 热重启 /重启加载

大家知道我们在做 Flutter 开发的时候，它自带热 重启/重新加载的功能， 但是你可以能会发现；在混合开发中 Android 项目集成 Flutter 项目的时候 重启/重新加载不起作用了；那在混合开发中怎么启用 重启/重新加载：

1. 手机连接我们的 电脑
2. 关闭我们的应用；然后 运行 flutter attach;(在对应的 flutter_module 项目根路径)
3. 当出现 “Waiting for a connection from Flutter on PACM00... 的时候打开我们原生App；并且进入我们的 Flutter 界面

   然后会提示同步信息和 命令信息 （因为我有两个手机连接电脑；这里会有一个选择手机的步骤）

   D:\MineGit\flutter_trip\flutter_module_john>flutter attach
   Multiple devices found:
   SM G9650 (mobile) • 21a9f15c1d037ece • android-arm64 • Android 10 (API 29)
   PACM00 (mobile)   • JZU8PB9DQOG68D6D • android-arm64 • Android 10 (API 29)
   [1]: SM G9650 (21a9f15c1d037ece)
   [2]: PACM00 (JZU8PB9DQOG68D6D)
   Please choose one (To quit, press "q/Q"): 2
   Waiting for a connection from Flutter on PACM00...
   Syncing files to device PACM00...                                   7.4s
   
   Flutter run key commands.
   r Hot reload.
   R Hot restart.
   h Repeat this help message.
   d Detach (terminate "flutter run" but leave application running).
   c Clear the screen
   q Quit (terminate the application on the device).
   
    Running with sound null safety 
   

    现在你只要 修改完毕 dart 代码保存；然后在 按 r 键就能立马看到效果了

   

5. 调试 dart 代码

在混合开发模式下， 如何更好的调试我们的代码：

1. 关闭App（这一步很关键）
2. 点击 AndroidStudio 的 Flutter Attch 按钮（前提是 安装过flutter 与 dart 插件）
3. 启动App

打上断点  就能进入 对应的断点 了

6. 发布应用 配置好证书

    signingConfigs {//添加
        release {
            storeFile file(MYAPP_RELEASE_KEY_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            signingConfig signingConfigs.release//添加
        }
    }

直接运行命令：

>gradlew assembleRelease

或者：

打出来的APK 有：

 在这里可以设置：armeabi-v7a

  指定 APK 只支持32位 类型 减小包体

plugins {
    id 'com.android.application'
}

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.john.nativetoflutter"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

        ndk {
            abiFilters 'armeabi-v7a'
//            abiFilters "armeabi", "armeabi-v7a", "x86_64", "x86"
        }
    }
    signingConfigs {//添加
        release {
            storeFile file(MYAPP_RELEASE_KEY_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            signingConfig signingConfigs.release//添加
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation project(':flutter')
}

IOS: 原生嵌入 Flutter

1. 首先你得有原生工程
2. 你的 Mac 正确配置 Flutter 所需要的环境tt
3. 你得有 Flutter_Module 工程；我是直接使用上面 android 功能已经创建好的；
4. 因为 Flutter 有依赖  pod 管理插件；

Pod:  Podfile

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

flutter_application_path = '../flutter_module_john'  
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'native_project_ios' do
  # Comment the next line if you don't want to use dynamic frameworks
  

  install_all_flutter_pods(flutter_application_path)

  # Pods for native_project_ios

  target 'native_project_iosTests' do
    inherit! :search_paths
    # Pods for testingå
  end

  target 'native_project_iosUITests' do
    # Pods for testing
  end

end

 Flutter Module 里面的 .ios  和 .android 是一个隐藏文件夹; mac 上面想要看见隐藏文件夹；shift + commond+ .

这里自己 根据自己的目录进行配置就可以了；然后写一个按钮 实现跳转 传值：

#import <Flutter/Flutter.h>
///

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    UIButton *button =[UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self action:@selector(handleButtonAction) forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Flutter " forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor redColor]];
    button.frame = CGRectMake(80, 210, 160, 40);
    [self.view addSubview:button];
}
- (void)handleButtonAction{
    FlutterViewController *flutterviewController =[FlutterViewController new];
    [flutterviewController setInitialRoute:@"{name:'devio',dataList:['aa','bb','bb']}"];
    
    [self presentViewController:flutterviewController animated:true completion:nil];
}

  在说flutter与原生的混合开发之前，先和初学flutter的小伙伴提个建议，建议大家刚开始的时候先在纯flutter的项目上练习flutter的相关技术，等练习的差不多了， 再练习flutter与原生的交互。主要原因是：与原生交互的时候会有很多环境的问题，比较折磨人。容易让人产生畏难情绪。
  由于国内flutter做的比较多的一般是原生做安卓的小伙伴，而且市面上的书籍作者也是做安卓出身，书中的demo也是安卓的例子，安卓这一块我就不再多说了，重点说说flutter与iOS进行交互。

集成到项目

  将flutter项目集成到原生项目中，我这边参考的是官方的推荐方式Flutter module具体步骤如下：

cd some/path/
flutter create --template module my_flutter

在 my_flutter 模块，目录结构和普通 Flutter 应用类似：

my_flutter/
├── .ios/
│   ├── Runner.xcworkspace
│   └── Flutter/podhelper.rb
├── lib/
│   └── main.dart
├── test/
└── pubspec.yaml

参考网址：https://flutter.cn/docs/development/add-to-app/ios/project-setup

podfile的配置

1，在 Podfile 中添加下面代码：

flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

2，每个需要集成 Flutter 的 Podfile target，执行 install_all_flutter_pods(flutter_application_path)：

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

3，执行pod install
执行完这些以后，你已经将flutter项目集成到的原生的工程里面了。
备注：my_flutter这个名字大家根据自己的需求改，另外podfile下的路径记得不要弄错了。

Xcode相关的配置

1，环境变量
打开my_flutter路径下的.iOS文件夹，然后打开runner.xcworkspace,在buildsetting里面可以看到如下设置。

User-Defined这些配置里FLUTTER_ROOT特别重要，你需要在你的原生项目中把这个根据你自己的fluttersdk路径进行配置。不然的话，联调会有问题，flutter attach不成功
2，运行脚本配置
在Xcode的runScript中还需要配置一些脚本，具体如下：

具体脚本如下：

# Type a script or drag a script file from your workspace to insert its path.
/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" thin

3，真机编译bitCode问题
直接操作如下：

配置完这些，后续运行，调试项目基本不会有太大的问题了。

交互的形式

flutter与原生进行交互主要有如下几种方式：

FlutterMethodChannel

调用方法（method invocation）一次通讯

FlutterBasicMessageChannel

传递字符串&半结构化的信息。备注：持续通讯

FlutterEventChannel

用于数据流（stream）的通讯。备注：持续通讯

由于FlutterMethodChannel在项目中使用较为频繁，我下面重点说下FlutterMethodChannel，其他两个大家感兴趣的话，搜下即可，比较简单。
1，AppDelegate准备
需要配置引擎，同时是让flutter和原生app的生命周期建立绑定关系

通过AppDelegate通过集成FlutterAppDelegate来讲原生app的生命周期和flutter模块建立了绑定关系，flutterEngine需要初始化一下，同时需要将插件注册到引擎里。

2，原生调用flutter方法
原生调用flutter方法之前需要先创建一个flutterVC，具体如下：

红框下面的代码是处理flutter调用原生方法对应的处理代码。
调用flutter方法代码如下：

 /// 选择画笔颜色
    func selectPencilColor() -> () {
         selectColorType = 1
         let cssString = self.pencilBrush.style.lineColor.cssString()
         methodChannel!.invokeMethod("currentColor", arguments:cssString)
         present(flutterVC!, animated: true, completion: nil)
    }

Flutter端接收到原生的消息该如何处理呢。

3，flutter调用原生方法
flutter调用原生方法比较简单，具体如下：

    methodChannel.invokeListMethod("pickColor",currentColor);

通过上面的步骤我们基本完成了原生向flutter，flutter向原生的通信。感兴趣的小伙伴也可以对这个通信进一步的封装，阿里也封装了相关的框架，FlutterBoost感兴趣的小伙伴可以看下。

参考博客：https://www.freesion.com/article/7932966090/

混合开发的一些建议

尽可能以模块的形式进行交互，页面级，view级的交互，根据团队的规模，以及人力情况酌情考虑。还有就是flutterVC，以及flutter引擎，如果没有必要，尽量避免反复创建，影响性能。当然了如果flutter模块使用频次较低，并且重要程度没那么高，也可以用的时候再去创建。
我这边创建了一个QQ交流群，欢迎有志于进行flutter学习的小伙伴进群交流学习。

H5混合开发

混合开发、原生开发、H5开发的区别：

简述：主流APP：原生APP、H5(webapp)、混合APP，相对应的定制研发即原生开发、H5开发、混合开发

原生APP开发优缺点：

• 可以访问手机的所有功能，可实现功能最齐全
• 运行速度快、性能高、用户体验较好
• 兼容性高
• 比较快速的使用设备端提供的接口，处理速度上有优势
• 开发周期长、成本较高，可移植性较差
• 内容有限制
• 获得新版本必须要用户重新手动下载更新

WEB APP开发：

简述：HTML5开发，利用WEB技术进行的APP开发。可以在手机浏览器上打开的网站

优缺点：

1. 支持的设备范围广，一套代码可以同时在安卓、IOS、Windows上运行
2. 开发成本低
3. 无内容限制
4. 适合展示大量的文字信息，且样式比较丰富的页面
5. 用户可以直接使用最新版本（自动更新），而无需手动下载更新
6. 不能直接访问手机硬件和连线缓存
7. 对连网要求较高，离线不能做任何操作
8. 功能有限

 混合开发（原生+H5）：

简述：将原生的代码利用WebView插件或者其他框架为H5提供容器，程序主要的业务实现、界面展示都是由H5完成

优缺点：

• 开发效率高、统一套代码安卓、IOS基本上都可以使用
• 更新和部署都比较方便，每次升级版本只需在服务器端升级即可，不需上传到APP Store进行审核
• 代码维护方便，版本更新快
• 比Web版实现的功能多
• 可以离线缓存
• 加载缓慢，网络要求高：混合APP数据需要全部从后台服务器获取，每个页面都需要重新加载，因此打开速度慢，用户体验不是很好
• 既懂原生又懂H5开发的工程师较少

目前或者开发的两种模式：

1、原生主导开发模式：需要安卓和IOS开发人员，整个APP既有原生开发又有H5开发，在需要H5页面时由原生开发人员实现内联

2、H5主导的开发：只需H5开发工程师，借助一些封装好的工具实现应用的打包和调用原生设备的功能，比如Builder的云端打包功能

如何区分H5开发和原生开发：

页面下拉刷新时，如果没有明显的刷新现象，则是原生开发；H5会闪一下屏

下拉页面的时候显示网址就是H5开发

---

H5页面的开发布局

必不可少的meta

`<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">`

flex布局（推荐）

语法：

• 伸缩容器 display:flex

• 伸缩流方向 flex-direction : row | row-reverse | column | column-reverse解释：reverse反向

• 伸缩换行flex-wrap：适用于伸缩容器，也就是伸缩项目的父元素，主要用来定义伸缩容器里是单行还是多行显示。语法：flex-wrap:nowrap | wrap | wrap-reverse

• 主轴对齐justify-content：flex-start | flex-end | center | space-between | space-around解释：主轴对齐适用于伸缩容器，主要用来定义伸缩项目沿着主轴线的对齐方式。其中：flex-start：伸缩项目向一行的起始位置靠齐

   space-between：伸缩项目会平均分布在行里。第一个伸缩项目在一行中的最开始位置，最后一个伸缩项目在一行中的终点位置。
   space-around：伸缩项目会平均分布在行里，两端保留一半的空间。

• 侧轴对齐align-items和align-self

  • 伸缩项目在侧轴的对齐方式，主要由属性align-items控制

  • 语法：align-items：flex-start | flex-end | center | baseline | stretch解释：baseline：根据伸缩项目的基线对齐，基线根据伸缩项目的内容计算得到。stretch：默认值，伸缩项目拉伸填充整个伸缩容器

  • 伸缩项目自身在侧轴的对齐方式，主要由属性align-self控制属性值同align-items，实际上相当于特殊给自己定义对齐方式

• 堆栈伸缩行align-content

  • 语法：align-content : flex-start | flex-end | center | space-between | space-around | stetch解释：stetch：默认值，各行将会伸展以占用额外的空间这个属性只有伸缩项目有多行时才生效，这种情况只有flex-wrap为wrap时，并且没有足够的空间把伸缩项目行放在同一行中。也就是这个属性将对每一行起作用而不是每个伸缩项目。

• 伸缩性flex

  • 语法：flex : none | flex-grow

• 显示顺序order

  • 语法：order : number

  • 解释：改变伸缩项目出现在源文档的次序。eg：order:1 ; order : 2伸缩容器会以序号最小的组开始布局，在同一个组里的伸缩项目依据源文档里的次序布局

百分比布局

rem布局（px转rem插件）

px2rem 结合lib-flexible
    1、安装：
        npm i lib-flexible --save
        npm i px2rem-loader --save-dev

    2、引入
        在main.js中引入
        import 'lib-flexible'

    3、配置
        vue.config.js中
        // css:
        module.exports = {
          chainWebpack: config => {
            config.module
              .rule('css')
                .test(/\.css$/)
                .oneOf('vue')
                .resourceQuery(/\?vue/)
                .use('px2rem')
                  .loader('px2rem-loader')
                  .options({
                    remUnit: 75
                  })
          }
          
          // less:
          .rule('less')
          .test(/\.less$/)
          .oneOf('vue')
          .resourceQuery(/\?vue/)
          .use('px2rem')
          .loader('px2rem-loader')
          .before('postcss-loader')
          .options({
            remUnit: 75
          })
          .end()

    4、使用：750px的设计图量多少px就直接写多少px即可

    5、补充：
    （1）按照px来编写都会转化成rem的形式，但是有些地方我们不想转换，可以用下面两种方法。
    
    a.在px后面添加/*no*/或者单位写成大写的PX，不会转化px，会原样输出。 — 一般border需用这个
    b.在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个
   
* postcss-pxtorem 结合lib-flexible(推荐）
​
    1、安装：npm install postcss-pxtorem -D

    2、vue.config.js中配置
       

 css: {
            loaderOptions: {
              postcss: {
                plugins: [
                  require('postcss-pxtorem')({
                    rootValue : 75, // 换算的基数
                    selectorBlackList  : ['weui','mu'], // 忽略转换正则匹配项
                    propList   : ['*'],
                  }),
                ]
              }
            }
          }

    3、rem函数：结合lib-flexible(推荐）
 

   // 设置 rem 函数
          function setRem () {
    
            // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
            let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
            let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
            htmlDom.style.fontSize= htmlWidth/10 + 'px';
          }
          // 初始化
          setRem();
          // 改变窗口大小时重新设置 rem
          window.onresize = function () {
            setRem()
          }

 

px布局

只要结合百分比布局和弹性盒布局使用。手机端视觉体验上差别不大，根据项目具体情况选择技术方案,一般border边框和字体大小可以使用px

---

开发注意事项、H5与原生（安卓）交互

开发注意事项

1、H5开发兼容性

• transition 谨慎使用

• 一定要遵守url传参规范url标准形式：特殊字符：，"" {} {name:xxx} ## 空格 等等问题：IOS有可能h会出现白屏

2、与原生App"互斥"的功能

• 下拉刷新（推荐由H5的开发工程师实现）

• overflow-y

H5与原生（安卓）交互：

• android和h5交互

window.control.callHandler("事件名","参数")

1.打开带小程序标题新页面

事件名js_wx 参数是JSON.stringify({"url": path})

例子：打开百度网址的新页面window.control.callHandler("js_wx", JSON.stringify({

                        "url": "https://www.baidu.com/"
                    }))

2.打开本地h5页面（主要针对需要打开word\pdf文件）

事件名js_native 参数是JSON.stringify({"name": name})例子：打开日报window.control.callHandler("js_native", JSON.stringify({

                        "name": "dailyReport"
                    }))

3.token失效退出登录事件名token_invalid 参数是""window.control.callHandler("token_invalid","")

4.控制首页隐藏、显示底部栏window.control.callHandler("bottom_title","show") 显示window.control.callHandler("bottom_title","invisible") 隐藏

5.h5透明标题 结合1方法url参数带transparentTitle=1

• IOS与H5交互window.webkit.messageHandlers.js_wx.postMessage(JSON.stringify({

  'url': url

  }))

---

webpack打包优化解决方案

1、根据插件查看包的大小和体检，进行针对性分析--方式一

安装：npm install webpack-bundle-analyzer --save-dev

配置：

vue.config.js

module.exports = {
     chainWebpack: config => {
    if (process.env.use_analyzer) {
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
  }
}

package.json

{ 
     "scripts”: { 
          ... 
          "analyzer": "use_analyzer=true npm run serve” 
      }

2、CDN引入--方式二

• index.html cdn引入

vue.config.js

configureWebpack: config => {

 // devtool: 'source-map'

 // 优化，采用外部CDN

 config.externals = {

   'vue':'Vue',

   'element-ui':'ELEMENT',

   'echarts':'echarts'

 }

  },

3、Gzip压缩--方式三

1、安装依赖：npm install --save-dev compression-webpack-plugin

2、vue.config.js进行配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const isProduction = process.env.NODE_ENV === 'production'// 需要gzip压缩的文件后缀

const productionGzipExtensions = ['js', 'css']

configureWebpack: config => {

  // devtool: 'source-map'

  if (isProduction) {
          config.plugins.push(new CompressionWebpackPlugin({
    algorithm: 'gzip',
    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    threshold: 10240,
    minRatio: 0.8
        })
     )
  }

}

---

H5调试工具、webview

  H5调试工具：

• vConsole安装：npm install vconsole

在mian.js文件里引入： import Vconsole from 'vconsole'

const vconsole = new Vconsole Vue.use(vconsole)

• eruda

参考网址：GitHub - liriliri/eruda: Console for mobile browsers

npm install eruda

在 main.js里引入：

• import erdua from 'eruda'
• import erudaDom from 'eruda-dom'

erdua.init()

Vue.prototype.$echarts = echarts

webview：

• 概念：其实webview就是用来展示的view组件，他是使用webkit引擎来进行展示，它具有前进后退放大缩小等功能，简单来说，webview就相当于在你的手机中安装一个高性能的webkit浏览器。

• webview的初始化浏览器：网络请求耗时->服务端处理->渲染耗时->完成webview:webview初始化->网络请求耗时->服务端处理->渲染耗时->完成