pasoul / jtools Goto Github PK

本文列出常见的几种加载方式，旨在探索最佳加载实践。

jlb-tools版本：v0.0.4
webpack版本： v4.25.1

1、全量加载

import jtools from "jlb-tools";

打包后体积查看

2、部分加载

import { handleEmoji } from "jlb-tools";

打包后体积查看

发现体积依然是22.2Kb，部分加载没有生效，依然引入所有的js文件。按需加载没有生效？为什么element-ui 可以通过 import { Button } from 'element-ui';方式按需加载？

实际上 element-ui 想要实现按需加载，必须要借助babel-plugin-component插件完成，此插件将import { Button } from 'components'引入方法编译成var button = require('components/lib/button'),即最终引入的组件都放在lib目录下

3、按需加载的方案

方案一：每个模块都单独发布npm包

比如lodash，可以通过如下方式引入需要的模块：

npm i --save lodash.debounce
var debounce = require('lodash.debounce');

方案二：将每个模块单独导出

通过如下方式引入

var isMobile = require("jlb-tools/lib/isMobile");

查看打包体积，只有1Kb

打包体积确实减小了，但是写法过于冗长，借助babel实现import {isMobile} from 'jlb-tools'方式引入。

方案三：方案二+babel

此方案是在babel插件基础上，对方案二的改进

写法如下：

import {isMobile} from 'jlb-tools'

在.babelrc中配置

// .babelrc
{
  "plugins": [
   ["import-load", { library: "jlb-tools" }]
  ]
}

查看打包后的体积：

实际上此插件将import {isMobile} from 'jlb-tools'最终编译成import isMobile from "jlb-tools/lib/isMobile";

如果遇到此问题，应该在babel-loader配置中移除对node_modules校验

module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }
    ]
  }

babel6只会对.babelrc进行处理，为了避免此问题，jlb-tools 将 .babelrc 替换成 .babelrc.js