捆绑包很大，如何减小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中很常见）

这是如何将捆绑包分析器添加到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。这将允许将您的 bundle 拆分成可以在执行时调用的部分，从而大大减少您的应用大小。

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

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

---

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

<块引用>

再次提醒，不要在生产中使用它。

---

其他答案提到了 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"
    }
}