Bundle size 很大，如何减小 app.js 的大小？

Question

我正在使用 Vue.js 并且我的项目中只有 4 个组件。

我只导入了 bootstrap、jquery 和 lodash:

import { map } from 'lodash';
import 'bootstrap/js/dist/modal';
import $ from "jquery";

但是 npm run production 创建 400kb 大小.

npm run production配置如下图

cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

是否可以将包大小减小到 ~100KB？如果是怎么办？

Answer 1

使用 CompressionWebpackPlugin 并尝试 gzip

Answer 2

您应该将 bundle analyzer 添加到您的 webpack 配置中。

该工具将帮助您了解最终捆绑包的情况，例如：

您不小心导入了一些东西而没有注意到
你的一个依赖项非常大，你应该避免使用它
当您只想从库中导入单个函数时不小心导入了整个库（这在 lodash 中很常见）

下面是一个示例，说明如何将 bundle 分析器添加到 webpack 配置中：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const isBundleAnalyze = true; // turn it too true only when you want to analyze your bundle, should be false by default

module.exports = {
    // ... rest webpack config here
    plugins: [
        // ... rest webpack plugins here
        ...isBundleAnalyze ? [ new BundleAnalyzerPlugin() ] : []
    ]
};

同时检查你的最终 js 文件。

它应该是带有简单变量的单行代码。像这样：!function(e){function t(t){for(var n,r,o=t[0],i=t[1],s=0,l=[];s<o.length;s++) 如果它看起来不是这样，则意味着您配置的生产 webpack 构建不正确。

Answer 3

很明显为什么你的包超过 400kb，你正在导入 lodash 和 jquery，你只是缺少 moment.js（一个小笑话），但有一件事你能做的就是只用你需要的。

首先，如果您正在使用 Vue、React 或任何 jQuery UI 库，除非必要，否则您不应使用 jQuery。

您可以做的另一件事是只导入您需要的内容，而不是：

import { map } from 'lodash';

尝试

import map from 'lodash/map';

甚至更好

import map from 'lodash.map';

https://www.npmjs.com/package/lodash.map

延迟导入，阅读更多内容 here。这将允许将您的包拆分成可以在执行时调用的部分，从而大大减少您的应用程序大小。

const Foo = () => import('./Foo.vue')

还有 SSR（服务器端渲染），它基本上是在构建时生成应用程序的初始 HTML 代码并渲染输出，以向用户显示网站上有内容，但是您还需要了解，这不会有太大作用，因为浏览器需要解析 Javascript 代码（水化过程）以使网站正常运行。

如果您从 2021 年 4 月开始使用 React，React 团队宣布 React Server Components，这似乎是一件大事，我认为许多其他库会将组件移动到服务器（我希望 Vue 能做到。

Again as of today don't use it on production.

其他答案提到了 webpack-bundle-analyzer 的使用，这里有一个使用技巧：

webpack.config.js

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const analyzing = process.env.NODE_ENV === 'analyze';

module.exports = {
   plugin: [
     ...(analyzing ? [new BundleAnalyzerPlugin()] : [])
   ]
}

你的package.json

{
    "scripts": {
        "analyze": "NODE_ENV=analyze webpack build"
    }
}

Bundle size 很大，如何减小 app.js 的大小？

Bundle size is big, how to reduce size of app.js?

webpack

vue.js

laravel-mix

是否可以将包大小减小到 ~100KB？如果是怎么办？

您应该将 bundle analyzer 添加到您的 webpack 配置中。

下面是一个示例，说明如何将 bundle 分析器添加到 webpack 配置中：

同时检查你的最终 js 文件。