时间戳

首页 > 解决方案 > 导入“sjcl”时 Webpack 4 不需要的库。

javascript - 导入“sjcl”时 Webpack 4 不需要的库。

问题描述

我创建了一个没有任何配置的简单 webpack 4 演示项目。我添加了一个简单的 index.js，它只打印出一个简单的行并且一切正常。一个 900 字节的 main.js 按预期生成。

但是，当我需要 24kb 库“sjcl”（具有 0 个依赖项）然后执行构建时，会生成一个 400kb 的文件。我已经使用分析仪对发生了什么有任何想法？

就像 webpack 正在导入大量依赖项来处理这个库。我怎样才能减轻这种情况？

index.js

require("sjcl");
console.log("hello world");

包.json

{
  "name": "js-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "sjcl": "1.0.7"
  },
  "devDependencies": {
    "webpack": "4.16.5",
    "webpack-cli": "3.1.0"
  }
}

资产大小限制警告：以下资产超出建议的大小限制 (244 KiB)。这会影响 Web 性能。资产：main.js (323 KiB)

下面是我的分析器： https ://pastebin.com/iguWmmaS

标签： javascriptwebpackwebpack-4

解决方案

看起来 webpack 将节点加密模块的浏览器兼容版本添加到包中，从而显着增加了大小。为了防止 Webpack 这样做，您可以使用下面的选项让 webpack 忽略该库。

module: {
            noParse: [
                /sjcl\.js$/,
            ]
         }

推荐阅读