浅谈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 等等。详细的用法可以参考devtool官方文档，devtool配置对比 ， webpack sourcemap 选项多种模式的一些解释 ， 如果你的文件在打包之后突然变成好几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 。 用法： uglifyjsplugin详细用法

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。