我有两个组合在600字节(.6kb)以下的文件,如下所示.

那么,我的应用程序是如何运行的呢.捆js如此之大(987kb),更重要的是,如何管理它的大小?

src文件索引.js

import _ from 'lodash';
import printMe from './print.js';


  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'click and check console';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

src文件打印.js

export default function printMe() {
  consoe.log('Called from print.js');
}

网页包.配置.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print:'./src/print.js'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

包裹json

{
  "name": "my-webpack-4-proj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "mode": "development",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "csv-loader": "^2.1.1",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "express": "^4.16.3",
    "lowdash": "^1.2.0"
  }
}

警告信息:

assets资源 规模限制警告:以下assets资源 超过

推荐答案

这是因为webpackBundle 了所有代码依赖项.当您使用lodash时,lodash精简版将添加到您的源代码中.此外,还包括源 map :

devtool: 'inline-source-map',

虽然这对于调试来说应该没问题,但没有理由在Prod构建中包含源映射.所以你可以做一些事情来减少你的包裹大小.

  1. 确保在网页包配置中正确设置mode:标志.你可以 Select "开发"模式或"生产"模式.这将提示网页关于你正在做什么样的构建,这样它会给你适当的警告.
  2. 确保在prod构建中不包含源 map
  3. 避免过度使用不需要的外部依赖项.

有时,即使这些事情也不会使您的包大小低于244kb,在这些情况下,您可以做的是拆分包并开始使用逻辑块.

另一种可以使用的技术是动态导入.

动态导入:通过模块内的内联函数调用拆分代码

这将允许您在逻辑上将代码分解为绑定到屏幕的模块,以便只加载所需的库.有关动态导入的更多信息,请查看官方文档.

Node.js相关问答推荐

MongoDB:更新批量操作中许多不能正常工作的内容

MongoDB-如何验证Document字段以仅允许特定的文件扩展名?

自动将Selify打开的Chrome窗口移动到Mac OS中的第三个显示器

Express无法发布

如何使用NodeJS在mongodb中更新文档

通过 Node js 中的 TBA 执行 netsuite REST upsert 操作出现 401 错误

DynamoDB 分页数据检索

表达 js 错误处理程序在第一个之后被忽略

bcrypt.compare 每次都返回 false

如何在带有 JS 的 Nodejs 中使用没有 Async 方法的 Await

express 和 mongoose 的新密码不正确

如何在 Docker 容器中 SSO 登录 AWS(使用 aws-sdk v3)

如何使用 node 在 koa.js 中发送响应

BrowserRouter工作时为什么HashRouter不工作?

如何更新 MongoDB 中对象数组中的键?

users.watch(在 gmail google api 中)如何收听通知?

什么是nestjs错误处理方式(业务逻辑错误vs.http错误)?

如何在 Node.js 的 console.log() 中创建换行符

安装 node.JS 时,node.js 运行时和 npm 包管理器选项有什么区别?

`return function *(){...}` 是什么意思?