Question

我在条目JS文件中唯一拥有的是：

import $ from 'jquery';

jQuery JS文件的大小 29.5kb 来自if the - often locally used - embedded Database like H2 has to back off and instead use a production Database。我的条目，仅包含jQuery，没有别的，大小为 86kb 。

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: './src/js/scripts.js',
    output: {
        publicPath: "./dist/",
        path: path.join(__dirname, "dist/js/"),
        filename: "bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    presets: [
                        ['env', { loose:true, modules:false }],
                        'stage-2'
                    ],
                    plugins: [
                        ['transform-react-jsx', { pragma:'h' }]
                    ]
                }
            },
            {
                test: /\.pug$/,
                use: [
                    "file-loader?name=[name].html&outputPath=../dist",
                    "extract-loader",
                    "html-loader",
                    "pug-html-loader"
                ]
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader?url=false', 'sass-loader']
                })
            },
        ]
    },
    resolve: {
        alias: {
            "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
            "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
            "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
        }
    },
    plugins: [
        new ExtractTextPlugin('../css/main.css'),
        new UglifyJsPlugin({
            test: /\.js($|\?)/i
        })
    ],
    stats: {
        warnings: false
    }
};

我还应该提一下，进入输出 bundle.js 它仍然有jQuery注释。

jQuery JavaScript Library v3.3.1 jsdelivr ......

即使我使用-p参数调用webpack并使用UglifyJS插件，但文件的其余部分也会缩小并损坏。有什么想法吗？

谢谢！

Answer 1

尝试从链接中复制并粘贴缩小的jquery。它的大小 86.9 kb 。 This link还表明jquery v3缩小文件大小也在 80kb 附近。

所以你已经有了正确的设置。也许 29.5kb 文件大小为缩小+ gzipped 文件。

Answer 2

根据Niyoko发布的链接，29.5kb的文件大小绝对是缩小版+ gzipped版本。

我还建议退房Fuse-Box它将我们的项目规模从1mb减少到200kb以下（供应商和App捆绑组合）。非常容易上手，它首先是TypeScript :)它采用了许多更受欢迎的捆绑器的最佳功能，并将它们组合在一起，并以这些功能为基础。

Webpack输出包大于预期

2 个答案: