【覆盤】ios部分機型頁面白屏問題

前言

　本篇主要記錄我解決ios10.0+白屏問題的過程，內容包含以下：
一、ios移動端線上debug方式
二、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