vue.js - 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

你应该加上bundle analyzer到你的 webpack 配置。

该工具将帮助您了解最终 bundle 的情况，例如:

• 你不小心导入了一些东西而没有注意到
• 你的一个依赖项非常大，你应该避免使用它
• 当您只想从库中导入单个函数时不小心导入了整个库(这在 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 构建配置不正确。