deep-import-loader

介绍

利用webpack构建代码时，通过分析依赖关系，寻找到所有的import的最终指向并进行替换，以避免项目在打包时将某个npm包完整引入，以此来减少无用模块，降低代码体积。

与webpack的tree-shaking的区别

虽然webpack也提供了类似的按需引入模块的功能，但触发条件比较苛刻。例如，如果项目将代码编译为commonjs（很多项目使用了@babel/plugin-transform-modules-commonjs或babel-plugin-transform-es2015-modules-commonjs），那么按模块的导出将失效。或者，一些组件库、工具集的npm包并没有在package.json中声明sideEffects，即使我们可以确定它不含副作用，也无法按模块引入。一些做法是引入具体路径，例如import Foo from 'somemodule/lib/foo'，但是开发不友好、容易疏漏，并且需要了解模块的目录结构。

原理

在其它loader之前编译代码，对所有import ... from ...语句进行分析。如果发现某一个模块来自更深层级的文件，那么会将路径指向该文件再进行打包。例如：

// Before
import { Foo, Bar } from 'module1';
import { Foo as myFoo } from 'module2';`

// After
// 例如 Foo 来自于 foo.js 的默认导出
import Foo from 'module/path/foo.js';
// 例如 Bar 来自于 utils.js 的 export { Bar }
import { Bar } from 'module/path2/utils.js';`
// 兼容 as 和 tsx 等用法和语法
import myFoo from 'module/path3/foo.tsx';`

如何使用

1. 安装deep-import-loader：

   npm install deep-import-loader 或 yarn add deep-import-loader

2. 修改webpack配置，在rules的末尾增加此项（以webpack@4为例）：

   rules: [{
       test: /\.(js|jsx|ts|tsx)$/,
       use: [
           // ... other rules
           {
               loader: 'deep-import-loader',
               options: {
                   blackList: ['adirtymodule'],
                   whiteList: ['somemodule', 'anothermodule'],
                   log: true,
                   warn: true
               }
           }
       ]
   }]

   在末尾增加的原因是rules是倒序执行的，以此确保deep-import-loader会先拿到代码，进行转换后再输出给其它loader，避免其它loader预先将import编译为其它写法。

   参数介绍：

   | Props | Default | Description | |---------|--------|-------------| | blackList | [] | npm包黑名单，引用这些包中的模块时会跳过替换。 | | whiteList | [] | npm包白名单，在白名单中的包才一定会进行import指向的替换。否则会根据这个包在package.json中的设置，当sideEffects为false时才会替换。设置为星号'*'代表全部替换。 | | log | false | 打包时，显示出有哪些模块被调整了引入路径、新路径。 | | warn | false | 打包时，显示出有哪些模块调整时没有找到真正的路径，保持原样。 |

3. 如果项目中的文件类型为vue，需要在plugins中引入VueLoaderPlugin。注意不要修改上面的test。参考https://vue-loader.vuejs.org/guide/#webpack-configuration。