談談前端工程化 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