webpack打包之后的文件过大的解决方法-白红宇

以前一直使用create-react-app这个脚手架进行react开发，后面因为一些自定义的配置，转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现，纳尼？怎么文件这么大？？？于是研究了一下如何处理webpack打包之后文件太大的情况，简单记录下来。

首先配置全局变量

首先，通过指定环境，告诉webpack我们当前处于production环境中，要按照production的方式去打包。

//指定环境，将process.env.NODE_ENV环境与library关联 new Webpack.DefinePlugin({	'process.env.NODE_ENV': JSON.stringify('production'), }),复制代码

优化`devtool`中的`source-map`.

dev-tool提供了很多种选项，用来增强我们debug的能力，我们熟知的有：source-map,inline-source-map,cheap-source-map等等。详细的用法可以参考，，， https://webpack.github.io/docs/configuration.html#devtool 如果你的文件在打包之后突然变成好几M，那么不用想，肯定是因为source-map的原因。source-map在开发阶段确实很好用，调试起来很方便，但是在生产环境下就没必要部署了。建议在prod环境下关闭source-map。

剥离css文件，单独打包

安装webpack插件extract-text-webpack-plugin。 npm install extract-text-webpack-plugin --save-dev。使用方法：

plugins:[ new ExtractTextPlugin('static/css/styles.[contenthash].css'),]复制代码

这里使用了contenthash，webpack会根据内容去生成hash值。

使用`UglifyJSPlugin`压缩。

通过UglifyJSPlugin可以压缩我们的*.js文件。安装方法: npm install uglifyjs-webpack-plugin --save-dev。用法：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')module.exports = {  plugins: [     new UglifyJSPlugin({            parallel: 4,            uglifyOptions: {                output: {                    comments: false,                    beautify: false,                },                compress: {                    warnings: false                },            },            cache: true,        }),  ]}复制代码

提取公共依赖

使用CommonsChunkPlugin插件，将多个js文件进行提取，建立一个独立的文件。这个文件包含一些共用模块，浏这样览器只在刚开始的时候加载一次，便缓存起来供后续使用。而不用每次访问一个新界面时，再去加载一个更大的文件。

entry:{	app:'./entry',	vendor:['react','other-lib'], }, plugins:[	 new Webpack.optimize.CommonsChunkPlugin({	     name: 'vendor',	 }), ]复制代码

开启gzip压缩

我们使用compression-webpack-plugin插件进行压缩。安装：npm install compression-webpack-plugin --save-dev。使用：

const CompressionPlugin = require("compression-webpack-plugin");plugins:[new CompressionPlugin({	 asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串     algorithm: 'gzip',//算法     test: new RegExp(          '\\.(js|css)$'    //压缩 js 与 css     ),     threshold: 10240,//只处理比这个值大的资源。按字节计算     minRatio: 0.8//只有压缩率比这个值小的资源才会被处理})]复制代码

压缩结果：

开启html压缩，自动添加上面生成的静态资源

添加插件html-webpack-plugin 安装： npm install html-webpack-plugin --save-dev 用法：

plugins:[  new HtmlWebpackPlugin({      title: '',         template: __dirname + '/../public/index.html',         minify: {             removeComments: true,             collapseWhitespace: true,             removeRedundantAttributes: true,             useShortDoctype: true,             removeEmptyAttributes: true,             removeStyleLinkTypeAttributes: true,             keepClosingSlash: true,             minifyJS: true,             minifyCSS: true,             minifyURLs: true,         },         chunksSortMode:'dependency'     }),]复制代码