谈谈前端工程化 js加载

2024年1月10日 199次阅读 来源: jump__jump

昔时的 js 加载

在没有 前端工程化之前，基本上是我们是代码一把梭，把所须要的库和本身的代码堆砌在一起，然后自上往下的援用就能够了。
谁人时代我们没有公用的cdn，也没有什么迥殊好的要领来优化加载js的速率。最多用以下几个计划。

可用的机能计划

  • 能够在代码某些须要js的时刻去运用 loadjs 来动态加载 js 库。如许就不会涌现最先时刻加载大批js文件。
  • 再大点的项目能够用一下 Nginx ngx_http_concat_module 模块来兼并多个文件在一个相应报文中。也就是再加载多个小型 js 文件时刻兼并为一个 js 文件。
  • BigPipe 手艺也是能够对页面分块来举行优化的，然则由于与本文关系不大，计划也没有通用化和范例化，加上本人实在没有深切相识所不举行深切引见，假如先相识能够参考 新版卖家中间 Bigpipe 实践（一） 以及 新版卖家中间 Bigpipe 实践（二）。

固然谁人时代的代码也没有像如今的前端的代码量和复杂度那末高。

Webpack 以后的js加载

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

须要库没有被大批运用状况

关于我们代码中所须要的代码库没有大批运用，比如说某种组件库我们仅仅只运用了 2、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

    原文作者：jump__jump
    原文地址: https://segmentfault.com/a/1190000019061704
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞