Reduce the volume of packages published to NPM and avoid repeated dependencies

Time:2022-1-21

I’ve been busy packaging one these two daysVue table componentAnd publish it to NPM to record how I reduced the size of NPM package from more than 100 kb to less than 1KB.

background

The bottom layer of this component depends on the element UI and uses its table component and pagination component. The final component is aDescribe the table components of each column completely through configuration。 At first, I released the packaged code. If the element UI component has not been introduced into the project using this component, it will not cause any duplicate dependencies, and the packaged version will be directly referenced. However, if the project itself has introduced a complete element UI (more than 10 systems using this component in our company have introduced a complete element UI), it will obviously cause code duplication and increase the bundle by 90KB (when uncompressed).

Do we need to release packaged code

If you publish packaged components, there is no way to avoid repeated dependencies. If you can copy the source code directly to the project and import it, you can avoid repeated dependencies. You can use package In JSONmoduleField.

When package When there is a module field in JSON, the file corresponding to the module will be searched first and processed using the ES module specification.

We can publish the unpackaged source code to NPM and package The module field in JSON points to the source code, so the imported package is handled by the project’s construction tool (webpack, Babel). Therefore, repeated dependencies can be avoided in theory.

Will there be side effects when using the module field

It is possible because the webpack plug-in can configure the exclude field. If the webpack configuration of the project excludes the node_ Modules, there will be side effects. For example, it may not be transcoded into Es5 code by Babel (the component I release will only have such a possible side effect at present).

How to solve side effects

  1. Publish after Babel transcoding
  2. In readme, it is pointed out that the user should cancel the exclude of Babel

Mechanism of judging repeated dependence

So far, the problem of repeated dependency cannot be solved… This is because of the judgment mechanism of repeated dependenceNode. Will the same module in JS be loaded multiple times?

Nodejs determines whether it is the same dependency according to the path of the module, and we all know node JS will start from the node of the directory where the current module is located_ Module starts to find it. If it is not found, we will find the node of the superior directory_ Modules, up to the root directory. Then the problem comes.

The package I released contains element UI in the dependencies, which is no problem. I do rely on element UI. When installing the package, the element UI will be downloaded according to the dependencies I specified and placed on the node of the package_ Modules. Therefore, the element UI referenced by the package and the element UI referenced by the project itself are considered as different dependencies due to different paths, so they are packaged into the bundle, resulting in repeated dependencies.

How to solve

Method 1: add in the Babel configuration of the projectIntroduce the configuration of element UI on demandHowever, this method needs to modify the project configuration, which is cumbersome. The 10 systems I maintain need to be modified one by one, which is too troublesome….

Method 2, very simple, put the package of the released package Delete the element UI and Vue of the dependencies of JSON, so that the element UI will not be downloaded to the node of the package during NPM install_ Modules is to find the parent directory until the project node_ The element UI in modules, so that the element UI referenced by the package and the element UI referenced by the project are the same dependency, so there will be no repeated packagingThis and vue-cli3 packaged libraries do not contain Vue dependenciesIt’s the same principle. The final result is the chunk vender after the final production environment is packaged JS has only increased by less than 1KB.

However, this also causes some problems, that is, projects that do not use element UI themselves need to manually import the packaged published files. However, for projects that do not use the element UI component, the benefits and probability of using this table component are not high. If they really want to use it, publishing a fully packaged package alone can also quickly solve the problem.

summary

Through these two days of tossing, the main harvest is 4 points
1. Process for publishing NPM packages
2、package. Module field in JSON
3. Mechanism of judging repeated dependence
4. How to avoid repeated dependencies when encapsulating components based on UI components