09月01, 2019

再谈按需加载

我之前在文章中有提过UI库按需加载的实现思路。这次说一个新的,再加上css如何按需加载

ts按需加载

目前的UI库加入了ts,所以单纯只用babel是无法解决的。因此,我脑子里面的想法是:先从ts转js,再js通过babel编译出来。

然后感觉这样解决,似乎太麻烦了,想着babel有没有办法直接处理ts的,网上翻了下方案,尝试了一把,水平有限,没尝试出来。

于是翻了一下别人的UI库,有赞他们的直接用了一个tsc命令。

给了我一些思路,就把它们的tsconfig.json拿了过来,在我本地改了一下。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "strict": true,
    "strictPropertyInitialization": false,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["dom", "es2018"],
    "module": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "rootDir": "./src",
    "pretty": true,
    "removeComments": true,
    "skipLibCheck": true,
    "allowJs": true,
    "target": "es5",
    "typeRoots": [
      "./src/lib/antd2/typings"
    ]
  },
  "include": [
    "./src"
  ],
  "exclude": [
    "./node_modules",
    "**/__test__",
    "**/__tests__",
    "**/examples"
  ]
}

这里面其实是有一个问题的,就是因为目前的项目是jsts的混合体,所以需要allowJs,然而它会和类型声明有冲突。

网上给了一个做法:TS编译之一把梭生成@types和js

不过事实上目前的项目还用不着抽取类型声明文件,原因也是ts和js混合在一起,不太好搞,等所有的都变成ts了,就可以考虑使用这个功能。

因为上面的原因,所以我们需要将自己写的*.d.ts文件拷贝到组件目录里面去,那么如何来实现呢?

利用copyfiles这个npm包,我们写一个命令即可:

{
    "scripts": {
         "copyDeclarFiles": "copyfiles -u 1 src/components/**/**.d.ts ./npm",
    }
}

css按需加载

比如有四个less文件:A、B、C、D。

A依赖B,B依赖C,C、D没有依赖,那我期望的加载顺序是:C、B、A、D。

然而光凭css的import能力来分析出依赖,这显然是做不到的。

大家如果翻antd的源码,会发现有一个style文件夹,里面有js文件。没错,就是要通过js来管理css的依赖顺序。

alt

alt

antd的代码中,它的导入css是这样做的:

// Just import style for https://github.com/ant-design/ant-design/issues/3745
const req = require.context('./components', true, /^\.\/[^_][\w-]+\/style\/index\.tsx?$/);

alt

不得不说,批量导入css的写法很牛逼。。可以学习学习!!

本文链接:www.my-fe.pub/post/talk-again-loading-on-demand.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。