谈谈前端工程化 js加载

当年的 js 加载

在没有 前端工程化以前，基本上是咱们是代码一把梭，把所须要的库和本身的代码堆砌在一块儿，而后自上往下的引用就能够了。
那个时代咱们没有公用的cdn，也没有什么特别好的方法来优化加载js的速度。最多用如下几个方案。

可用的性能方案

• 能够在代码某些须要js的时候去使用 loadjs 来动态加载 js 库。这样就不会出现开始时候加载大量js文件。
• 再大点的项目可能用一下 Nginx ngx_http_concat_module 模块来合并多个文件在一个响应报文中。也就是再加载多个小型 js 文件时候合并为一个 js 文件。
• BigPipe 技术也是能够对页面分块来进行优化的，可是由于与本文关系不大，方案也没有通用化和规范化，加上本人其实没有深刻了解所不进行深刻介绍，若是先了解能够参考 新版卖家中心 Bigpipe 实践（一） 以及 新版卖家中心 Bigpipe 实践（二）。

固然那个时期的代码也没有像如今的前端的代码量和复杂度那么高。

Webpack 以后的js加载

与其说 Webpack 是一个模块打包器，倒不如说 Webpack 是一份前端规范。

须要库没有被大量使用状况

对于咱们代码中所须要的代码库没有大量使用，好比说某种组件库咱们仅仅只使用了 二、3个组件的状况下。咱们更多须要按需加载功能。
比方说在 MATERIAL-UI 咱们能够用

import TextField from '@material-ui/core/TextField';
import Popper from '@material-ui/core/Popper';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import Chip from '@material-ui/core/Chip';
复制代码

代替

import {
  TextField,
  Popper,
  Paper,
  MenuItem,
  Chip
} from '@material-ui'

复制代码

这样就实现了按需加载，而不是动辄须要整个组件库。可是这样的代码中这样代码并很差书写。咱们就须要一个帮助咱们转换代码的库。这能够参考 Babel 插件手册 以及 简单实现项目代码按需加载 来实现咱们的需求。

须要库大量被使用状况

若是咱们的库被当前的项目大量使用了，按需加载其实就未必是最好的方法了，若是咱们的服务器不是特别好的状况下咱们可使用 Webpack 的 externals 配置来优化项目的js。就简单的对 externals 配置简单说明一下。externals实际上是在全局中的获得库文件。

// 页面中使用 cdn，这样的话，咱们就会在 window 中获得 jQuery
  // 也就是 global.JQuery 浏览器中 global === window
  <script
    src="https://code.jquery.com/jquery-3.1.0.js"
    integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
    crossorigin="anonymous">
  </script>

  // 在项目中导入 jquery 使用
  import $ from 'jquery';

  // 配置中 左边是 配置的 jquery 告诉 Webpack 不须要导入
  // 配置中 右边是 配置的 JQuery 告诉 Webpack 记载 jquery 时候使用 global.JQuery
  externals: {
    jquery: 'jQuery'
  }
复制代码

可是使用 externals 曾遇到这样的状况。我在使用 material-ui 组件库时候发现该库在全局导出的代码是 material-ui。
也就是:

externals: {
    '@material-ui/core': 'material-ui'
  }
复制代码

此时会发生导入错误，错误缘由为: window.material-ui。
原本我是想要引入material-ui，却 - 符号变为了减号。
原本想要利用用 ['material-ui'] 来替换，却发现行不通: windows.['material-ui']
解决方法:

externals: {
    '@material-ui/core': "window['material-ui']"
  }
复制代码

由于 window 对象有本身引用本身，因此 window === window.window.window。因此代码为 window.window['material-ui']。能够参考 MDN Window.window

上文中的性能优化方案依然可用

loadjs 动态加载

在当前所须要 js 文件不须要大量使用同时须要的 js 文件是不须要开始时加载(如 React, React-Router 一类)的时候咱们依然可使用loadjs来加载(好比说 图标库一类，只在某一些页面使用)。

合并多个小型 js

对于在 HTTP2 中合并多个 小js文件未必好。由于在 HTTP2 中，HTTP 请求是廉价的，合并便再也不显得有优点。

BigPipe 方案

固然了,BigPipe 方案不是针对单页面应用程序。并且对于先后端的技术要求较高，因此对于项目未必是最有效的方案。

其余

现现在也可使用一些其余的方法。例如 Service Worker,Wasm 等一系列方案。不知道还有什么其余方法，也能够介绍给我。

参考文档

新版卖家中心 Bigpipe 实践（一）
新版卖家中心 Bigpipe 实践（二）
Babel 插件手册
简单实现项目代码按需加载
MDN Window.window