繁体   English   中英

使用webpack2最小化捆绑包

[英]Minimize bundle with webpack2

是否可以最小化我的捆绑文件和所有使用的模块。 我在javascript中使用import但我希望webpack也能最小化所有导入的js文件。 这意味着从导入的外部库中删除所有未使用的代码。 这可能吗。 特别是剧情是一个非常大的图书馆,但我只使用饼图。 我不认为我的包需要来自剧情的所有代码。 这是我的webpack配置文件:

const path              = require('path');
const webpack           = require('webpack');
const UglifyJSPlugin    = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry: 
    {
        cash: './js/page/cash.js'
    },
    output: 
    {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    resolve: 
    {
        modules: [
            path.resolve(__dirname, 'js')
        ],
        alias : {
            knockout: path.resolve(__dirname, 'js/knockout-3.4.2.js'),
            moment: path.resolve(__dirname,'js/moment.js')
        }
    },
    module: 
    {
        rules: [
            {
                test: /\.js$/, 
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        new UglifyJSPlugin({ 
            comments: false,
            sourceMap: false,
            compress: {
                unused: true,
                dead_code: true,
                warnings: false,
                drop_debugger: true,
                conditionals: true,
                evaluate: true,
                drop_console: true,
                sequences: true,
                booleans: true
            },
            mangle: true
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

module.exports = config;

执行此操作的最佳方法是使用ES6 import 语法有选择地导入所需的成员(函数)。 Webpack的文档描述了如何操作。 如果你这样做,Webpack应该自动执行Tree Shaking。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM