解决webpack打包文件过大的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jlin991/article/details/61925347

最近做了一个H5小游戏，用React实现UI，基于canvas实现动画的逻辑。
用webpack -p 打包发现输出的index.bundle.js文件体积非常大。

以下是我的webpack的配置文件：

var webpack=require('webpack');
var path=require('path'),
    node_modules=path.resolve(__dirname,'node_modules');
//var pathToReact=path.resolve(node_modules,'react/dist/react.min.js');

//public path
const ASSET_PATH=process.env.ASSET_PATH||'/public';

var pluginLoader=new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false,
    options: {
        context: __dirname
    }
})

module.exports={
    entry:{
        index:'./src/entry.js'
    }/*,
    resolve:{
        alias:{
            'react':pathToReact
        }
    }*/,
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].bundle.js",
        chunkFilename:"[id].chunk.js"
    },

    devtool:'inline-source-map',
    devServer:{
        //hot:true,
        contentBase:path.resolve(__dirname,'dist'),
        inline:true
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader',
            },
            {
                test:/\.scss$/,
                use:[{loader:"style-loader"}, //create style node from js strings 
                {loader:"css-loader"}, //translate css into Commonjs
                {loader:"sass-loader"} //compile Sass to css
                ]
            },
            {
                test:/\.jsx?$/,
                loader:'babel-loader',  //loader babel ,
                query:{
                    presets:['react','env']
                }
            },
            {
                test:/\.(png|jpg)$/,
                use:'url-loader?limit=40000'
            }
        ],

    },
    plugins:[commonsPlugin,
        new webpack.DefinePlugin({
            'process.env.ASSET_PATH':JSON.stringify(ASSET_PATH)
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV':JSON.stringify('production')
        })
    ]
} 

发现罪魁祸首是这个

devtool:'inline-source-map',

设置了source-map之后的大小是 2.88MB
而没有设置的时候是212KB
所以说开发环境的时候可以开sourcemap
但是生产环境就一定要把sourcemap注释掉！

提取第三方库

像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置还有可以加入这个

var commonsPlugin=new webpack.optimize.CommonsChunkPlugin({
    filename:"common.js",
    name:"commons"
});

在index.html

    <script src="common.js" defer async></script>
    <script src="index.bundle.js" defer async></script> 

实际上使用webpack -p

webpack -p

这是一个自动化的方法来构建生产环境下的项目。
它会 自动使用UglifyJsPlugin进行最小化
还会运行使用LoaderOptionsPlugin。
等价于下面这条语句：

webpack --optimize-minimize --define process.env.NODE_ENV="'production'"