谈谈前端工程化 js加载

当年的 js 加载

在没有 前端工程化之前,基本上是我们是代码一把梭,把所需要的库和自己的代码堆砌在一起,然后自上往下的引用就可以了。 那个时代我们没有公用的cdn,也没有什么特别好的方法来优化加载js的速度。最多用以下几个方案。

可用的性能方案

当然那个时期的代码也没有像现在的前端的代码量和复杂度那么高。

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

原文链接:segmentfault.com

上一篇:后端程序员使用Dreamweaver与Bootstrap所见即所得快速编写前端页面
下一篇:4.1 开发环境\目录结构\配置文件\功能梳理-博客后端Api-NodeJs+Express+Mysql实战

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    6 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    7 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    6 个月前
  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    6 个月前
  • 😀一个原生js弹幕库,基于 CSS3 Animation

    BulletJs 😀一个原生js弹幕库,基于 CSS3 Animation 项目地址 演示图 2020-08-13更新 采用rollup打包并发布到npm,rollup打包教程...

    14 天前
  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rc-bullets,项目约70%的代码基于rc-bullets,首先要感谢这个项目的作者...

    10 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的**“类“**究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​...

    8 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Github,欢迎 Star,一起接水💧 作为一个在互联网公司面一次拿一次 Offer 的面霸,打败了无...

    8 个月前
  • 📝记录:近期面试JS的提问

    1、求y和z的值是多少? var x = 1; var y = 0; function add(n){n=n+1;} y = add(x); console.log(y); 答案:为un...

    1 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ 诶呀,口水流出来了。

    7 个月前

官方社区

扫码加入 JavaScript 社区