plotly.js(@1.35.2)与Ionic 3.6.1生产构建失败求助

嘿，我之前也踩过Ionic 3搭配Plotly.js的类似坑，结合你说的情况——浏览器里运行一切正常，真机启动慢，生产构建直接失败，这俩问题基本都和Plotly.js的体积过大以及生产构建环节的代码处理不兼容脱不了干系。毕竟Plotly本身是个功能很全但体积庞大的可视化库，直接塞进Ionic Cordova项目里很容易出幺蛾子。下面给你拆解原因和对应的解决办法：

一、先搞定真机启动缓慢的问题 #

启动慢的核心原因就是Plotly.js完整包的体积实在太大（动辄好几MB），Cordova应用冷启动时要加载整个库文件，自然会让用户等很久。你可以试试这两个优化方向：

• 按需引入Plotly模块：别直接引入完整的plotly.js，只挑你实际用到的图表类型导入，比如你只用折线图和柱状图的话，代码改成这样：

  // 替换原来的 import Plotly from 'plotly.js'
  import Plotly from 'plotly.js/lib/core';
  // 按需导入需要的图表类型
  import 'plotly.js/lib/scatter';
  import 'plotly.js/lib/bar';
  

  这样打包后的体积能砍掉一大半，启动加载速度会明显提升。
• 静态加载Plotly文件：把Plotly的压缩版（比如plotly-latest.min.js）放到项目的www/assets目录下，然后在index.html里通过脚本标签引入：

  <script src="assets/plotly-latest.min.js"></script>
  

  之后代码里直接用全局的Plotly对象就行，这样Plotly的代码不会被打包进主应用bundle，主包体积变小，启动速度自然更快。

二、修复生产构建失败的问题 #

生产构建失败大概率是老版本UglifyJS无法处理Plotly里的ES6代码导致的（Ionic 3默认用UglifyJS做生产压缩，而你用的Plotly.js@1.35.2可能还残留了未转译的ES6语法），或者是类型定义和构建时的类型检查冲突。试试这些方案：

• 强制转译Plotly的ES6代码：在项目根目录创建webpack.config.js（如果没有的话），配置babel-loader转译Plotly的代码：

  module.exports = {
    module: {
      rules: [
        {
          test: /plotly\.js\/.*/,
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      ]
    }
  };
  

  同时确保你已经安装了babel-loader、babel-preset-es2015这些依赖，这样能把Plotly的代码转成UglifyJS能处理的ES5语法。
• 临时跳过类型检查（应急方案）：如果是类型定义文件导致的构建报错，可以修改ionic.config.json，关闭生产构建的严格类型检查：

  {
    "type": "ionic-angular",
    "integrations": {
      "cordova": {}
    },
    "defaults": {
      "ionic_angular": {
        "prodBuild": {
          "strictTypeChecks": false,
          "skipTemplateValidation": true
        }
      }
    }
  }
  

  不过这只是临时办法，最好还是确保@types/plotly.js的版本和你用的plotly.js版本匹配。
• 换用Terser代替UglifyJS：Terser支持ES6代码压缩，比老版UglifyJS更友好。你可以安装terser-webpack-plugin，然后修改webpack配置替换掉原来的UglifyJS插件，这样也能解决ES6代码压缩的问题。

三、额外的调试小技巧 #

• 构建失败时别慌，仔细看终端输出的错误日志，一般会明确指出是哪个文件、哪行代码出了问题（比如Unexpected token: operator (**)这种就是ES6幂运算符号没转译），针对性处理就行。
• 用ionic cordova build android --prod --verbose命令构建，能看到更详细的构建过程，方便快速定位问题。

内容的提问来源于stack exchange，提问作者Aiko