Vue进阶（幺柒零）项目部署后IE报 SCRIPT1002 语法错误 解决方案探讨_script1002 语法错误(2)

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

文章目录

• • 一、前言
    • 二、组件懒加载
    • • 2.1 什么是懒加载
        • 2.2 如何实现懒加载
    • 三、ES6代码转ES5代码
    • 四、延伸阅读 软件程序唤醒
    • • 4.1 protocolCheck 实现
        • 4.2 自定义实现
    • 五、延伸阅读 前端npm install 报错PhantomJS not found on PATH
    • 六、拓展阅读

一、前言

Vue项目改造升级后，原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误的提示信息。

经过代码排查，发现项目中新引入了一些依赖包导致系统无法正常启动。

出现以上错误，可从以下几个方面查找原因：

1. 可能与IE的某些插件冲突。把所有无关的IE加载项全部禁用后尝试；
2. 引用了不存在的 js 文件；
3. 页面的某些文件在文档模型还没建立时就已经开始引用相关的节点；

令人感到疑惑的是：其他原本可以本地IE热部署的项目在进行同样的升级改造后，依旧可以实现本地IE部署，且没有任何错误信息。故需要通过对比2个项目间的差异性着手进行分析。初步怀疑与webpack及babel版本有关。

经过仔细排查，发现报错前面给出了polyfill-eventsource added missing EventSource to window 的提示信息，但是通过配置webpack.base.config.js中加载babel-loader并未生效。

白屏错误发生前后项目区别是引入了新的js文件，故考虑采用动态引入方式引入相应js依赖文件。可根据系统类型动态引入js文件。

// 获取系统标识
let platform = navigator.platform
// 若为Windows OS
if (platform === 'Win32') {
	// TODO 执行存量代码逻辑
} else {
	import('./test.js').then(res => {
		this.test = res
		// TODO 执行新线代码逻辑
	})
}

或者通过以下方式：

// async await 的方式
const addJs = async ( )=>{
  await import ('xxx.js')
}

以上方案适用于在存量自定义组件中实现，对于新定义自定义组件，可考虑通过组件懒加载实现。

<template>
    <div>
        <span>it is router a</span>
        <br><br>
        <component-a></component-a>
    </div>
</template>

<script>
    export default {
        name: "router-a",
        components: {
            componentA: resolve => require(['./componentA.vue'], resolve)
        }
    };
</script>

<style scoped>

</style>

二、组件懒加载

随着Web应用程序的日益复杂，前端开发人员需要在保证页面加载速度的前提下更好地提供功能和用户体验。这就涉及到Vue组件的懒加载和预加载，它们是优化Vue应用程序性能的重要手段。

2.1 什么是懒加载

懒加载就是当用户需要访问某个组件时才会把该组件的代码加载进来，而不是一开始就把所有组件的代码都加载进来，这样可以减少初始加载的时间，提高页面的响应速度。

Vue提供了一个异步组件（async component）的概念，用于处理懒加载。

2.2 如何实现懒加载

可采用以下方式实现组件懒加载：

1. 使用 import() 动态导入组件

Vue 2.4.0以上版本支持使用import()方法来动态导入组件。

例如，定义一个异步组件，这个组件在需要的时候才会被加载进来：

Vue.component('my-component', () => import('./MyComponent.vue'));

2. 使用 webpack 的 require.ensure()

如果Vue项目使用webpack作为构建工具，那么可以使用webpack提供的require.ensure()方法来实现组件懒加载，不过这种方式已经不被推荐使用了。

例如，可以这样定义一个异步组件：

Vue.component('my-component', resolve => {
  require.ensure(['./MyComponent.vue'], () => {
    resolve(require('./MyComponent.vue'))
  })
});

三、ES6代码转ES5代码

其实白屏的真正原因应该是项目代码中涉及ES6+等高阶语法，运行在IE中无法正常解析，导致页面白屏问题发生。那么解决思路就是如何实现IE运行时能够解析ES6+等高阶语法。一种处理方案是通过应用babel实现es6+的语法降级。具体实现方式为在.babelrc文件中配置相关转码规则。

{
	"presets": [
		"es2015"
	]
}

注⚠️：需执行npm install -D babel-preset-es2015安装相应的依赖包。

若配置后问题依旧存在，可以使用手工方式将es6+降级为es5。实现方式为：

1. 初始化转码项目

vue init webpack Es6ToEs5

2. 安装转码工具

npm install -g babel-cli 
npm install --save -dev babel-cli babel-preset-latest
npm install -g babel-preset-latest

3. .babelrc文件维护以下内容， 代表我们需要的是最新的转换规则。

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：