【复盘】ios部分机型页面白屏问题

前言

　本篇主要记录我解决ios10.0+白屏问题的过程，内容包含如下：
1、ios移动端线上debug方式
2、ios10利用webpack打包uglifyjs-webpack-plugin压缩白屏问题

* swiper包问题排查
* uglifyjs-webpack-plugin依赖的uglify-es不能压缩Es6问题排查
* 替换成terser-webpack-plugin
* 替换成babel-minify-webpack-plugin
* 替换成terser-webpack-plugin-legacy

ios移动端线上debug方式

找原因并验证解决问题

现有问题

找原因

通过收集可能的原因

基于第一个问题：

* swiper打包问题
* 现用uglifyjs-webpack-plugin不能压缩Es6问题

验证&解决问题

项目中没有使用swiper，删除swiper相关包，排除影响先定位uglifyjs-webpack-plugin不能压缩Es6问题。

参考syntaxerror-cannot-declare-a-let-variable-twice的解答 ，是因为压缩包不能压缩Es6，现有terser-webpack-plugin插件配合webpack可以压缩Es6。
利用terser-webpack-plugin复现包不能压缩Es6，不兼容safari10的情况：

main.js:

import Vue from  'vue'
import App from  './App.vue'

let a = 2222;
let arr = \[2, 3, 4, 5, 6, 7\]
for (let a = 0; a < arr.length; a++) {
  console.log(arr\[a\])
}
console.log(a)
new  Vue({
el: '#app',
router: '',
render: h  \=>  h(App)
})

webpack.config.js:

const path = require('path')
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
entry: {
  app: './src/main.js'
},

devtool: 'inline-source-map',
devServer: {
    contentBase: './dist/js',
    hot: true
},

output: {
    filename: '\[name\].bundle.js',
    path: path.resolve(\_\_dirname, 'dist/js'),
    publicPath: ''
},

module: {
rules: \[{
    test: /\\.vue$/,
    loader: 'vue-loader'
},
{
    test: /\\.css$/,
    use: \['style-loader', 'css-loader'\]
},

{
    test: /\\.(png|jpe?g|gif|svg)(\\?.\*)?$/,
    use: \['url-loader'\]
}
\]
},

plugins: \[
// make sure to include the plugin for the magic
new  VueLoaderPlugin(),
new  HtmlWebpackPlugin({
  title: 'Output Management'
}),

new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new  TerserPlugin({
    sourceMap: true,
    parallel: 4,
    terserOptions: {
    compress: {},
    mangle: true,
    // safari10: true,
    }
})
\]
}

打开safari10: true确实可以解决这个问题。

可以确认是因为safari 10.0+ 不支持通过let定义重复的变量名，let也没有被转化成es5的语法。

换支持压缩Es6的压缩包

• 更改uglifyjs-webpack-plugin的依赖uglify-es至3.2.2版本
  参考解决方案: webpack uglify

• 更改其他支持压缩Es6的压缩插件：

  • 替换成terser-webpack-plugin
  • 替换成babel-minify-webpack-plugin
  • 替换成terser-webpack-plugin-legacy

最终解决方案
基于现有项目以上方案都未解决，最后通过yarn uprade升级了所有的包才解决问题。

基于upgrade uglify-es这个解决方案试着解决undefined is not an object，意外将所有的bug解决了。

几种支持压缩Es6的压缩插件

uglifyjs-webpack-plugin
uglifyjs-webpack-plugin@^1.2.7

terser-webpack-plugin
需要webpack4.0+，如果从webpack3.0+升级到webpack4.0+需要对依赖包做兼容上的修改。

webpack4.0+基于webpack3.0+做了哪些升级？

未完待续。

参考资料

webpack uglify

webpack升级详情

探讨npm依赖管理之peerDependencies