通过创建script 动态引入js

起因

在项目上会需要excel或者pdf这样的插件，不是每个页面都需要这个插件，如果通过npm install pdf.js 这样的方式会使得node_module会很大，项目比较臃肿，影响打包压缩时间。
项目上也会用到地图。不是每个页面都会用到， 如果放在html的header里会造成很大的浪费。
可以通过动态创建script标签的方式解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
dynamicScript (urls) {
      return new Promise((resolve, reject) => {
        const scripts = document.getElementsByTagName('script')
        const srcs = []
        for (let i = 0, len = scripts.length; i < len; i++) {
          srcs.push(scripts[i].getAttribute('src'))
        }
        let index = 0
        urls.forEach((s) => {
          if (!srcs.includes(s)) {
            const node = document.createElement('script')
            node.src = s
            node.type = 'text/javascript'
            document.body.appendChild(node)
            node.onload = function () {
              if (index === urls.length - 1) {
                resolve()
              }
              index++
            }
          } else {
            if (index === urls.length - 1) {
              resolve()
            }
            index++
          }
        })
      })
    },


this.dynamicScript(['../../../../assets/lib/ol.js']).then(d => {
  // eslint-disable-next-line no-console
  console.log(d)
  // eslint-disable-next-line no-consol
  console.log(ol.Map)
})

把插件放到服务器中，只有在用到的时候才会调用。

在angular中的应用，用到了rxjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
dynamicLoadScript(dynamicScripts: string[]) {
    let scriptSrc = Array.from(document.getElementsByTagName("script")).map(v => v.getAttribute('src'))
    return from(dynamicScripts).pipe(
      filter(v => !scriptSrc.includes(v)),
      tap(v => console.log('加载script：' + v)),
      mergeMap((v: any) => {
        let node = document.createElement('script')
        node.src = v
        node.type = 'text/javascript'
        document.body.appendChild(node)
        return fromEvent(node, 'load').pipe(first())
      }),
      defaultIfEmpty(null),
      last()
    )
  }