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

Posted 2023-02-22

【中文标题】Bundle大小很大，如何减小app.js的大小？

【英文标题】：Bundle size is big, how to reduce size of app.js?

【发布时间】：2019-11-30 04:53:53

【问题描述】：

我正在使用 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 ？如果是怎么办？

【参考方案1】：

很明显为什么你的包超过 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')

还有 s-s-r（服务器端渲染），它基本上是在构建时生成应用程序的初始 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"
    

【参考方案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 构建。

【参考方案3】：

使用 CompressionWebpackPlugin 并尝试 gzip