# flutter_split

> flutter-web分包工具

Latest version **1.0.5** (published 2022-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install flutter_split
pnpm add flutter_split
yarn add flutter_split
bun add flutter_split
```

Provides the command `ant`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-04-19 |
| First published | 2022-03-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | BinAnt |
| Maintainers | binbuyanza |
| Keywords | flutter, commander, nodejs |

## Links

- npm: https://www.npmjs.com/package/flutter_split
- Repository: https://github.com/BinAnt/flutter-split
- Homepage: https://github.com/BinAnt/flutter-split#readme
- Issues: https://github.com/BinAnt/flutter-split/issues
- npm.io page: https://npm.io/package/flutter_split

## Dependencies (1)

- [commander](https://npm.io/package/commander.md) ^9.0.0

## Recent versions

- 1.0.5 (latest) — 2022-04-19
- 1.0.4 — 2022-04-19
- 1.0.3 — 2022-04-19
- 1.0.2 — 2022-03-04
- 1.0.1 — 2022-03-04
- 1.0.0 — 2022-03-04

## README

## Flutter_split

> flutter打包成web的时候main.dart.js文件有点大, 用这个分包成几个小一点的文件, 首页加载快很多





## 安装

~~~shell
npm i flutter_split -g
~~~

## 使用

在你的项目执行build命令结束之后,执行一下命令:

~~~shell
ant -s dist
~~~
> dist 是你main.dart.js所在的文件夹, 比如 build, dist, 每个人的目录有可能不一样

## 配合文件

/dist/index.html加载main.dart.js的地方需要修改 

~~~js
 <!--<script src="main.dart.js" type="application/javascript"></script>-->
  <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    var fileContent = null;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    //创建script标签 并加载内容
    function createScript(content) {
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.onreadystatechange = function () {
        if (this.readyState == 'complete')
          callback();
      }
      script.onload = function () {
        callback();
      }
      // script.src = 'main.dart.js';
      script.textContent = content;
      head.appendChild(script);
    }

    // 请求回每一个文件的内容
    const xhr = new XMLHttpRequest();
    const okStatus = document.location.protocol === "file:" ? 0 : 200;

    function load(name) {
      xhr.open('GET', name, false);
      xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
      xhr.send(null);
      const result = xhr.status === okStatus ? xhr.responseText : null;
      if(xhr.status === okStatus) {
        fileContent = Promise.resolve(xhr.responseText)
        return true
      }
      return false;
      // return result ? Promise.resolve(result) : false
    }

    // 判断文件是否存在
    function isExistFile(filepath, filename) {
      console.log(filepath, filename);
      if (filepath == null || filename == null || filepath === "" || filename === "") {
        return false
      }
      var xmlhttp;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.open("GET", filepath + '/' + filename, false);
      xmlhttp.send();
      if (xmlhttp.readyState === 4) {
        if (xmlhttp.status === 200) return true; //url存在
        else if (xmlhttp.status === 404) return false; //url不存在
        else return false;//其他状态
      }
    }
    // 加载文件夹
    function loadDir(dir = '/part') {
      let num = 0;
      let result = [];
      let resultStr = '';

      while (load(dir + '/' + num + '.txt')) {
        result.push(fileContent)
        num++
      }

      Promise.all([...result]).then((resArr) => {
        resArr.forEach(text => {
          resultStr += `
      ${text}`
        })
        // console.log(resultStr, 'resultStrresultStr');
        if (resultStr.length === 0) {
          // 还是加载main.dart.js
          loadMainDartJs();
        } else {
          createScript(resultStr)
        }
      })

      // return resultStr
    }

    loadDir()
  </script>
~~~

---
_Source: https://npm.io/package/flutter_split · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._