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

vue-cli全家套相信很多人都用过，但可能很多人不太清楚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等等。详细的用法可以参考 Devtool官方文档（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 。compression-webpack-plugin 详细用法使用：
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//只有压缩率比这个值小的资源才会被处理})]【如何解决webpack打包文件过大的问题】压缩结果：

文章插图

文章插图

开启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' }),]