webpack4代码压缩基本方法

栏目: CSS · 发布时间: 5年前

内容简介：本文介绍的是webpack4的3个基本代码压缩方法，可以解决一部分同学打包文件过大的问题。但是大家注意，仅仅在production环境再应用这些机制，否则开发的时候会遇到编译太慢或者无法热加载代码的问题。首先定义下面的变量，用于判断当前编译的是否是生产环境，将其写在webpack.config.js文件头部：

本文介绍的是webpack4的3个基本代码压缩方法，可以解决一部分同学打包文件过大的问题。

但是大家注意，仅仅在production环境再应用这些机制，否则开发的时候会遇到编译太慢或者无法热加载代码的问题。

首先定义下面的变量，用于判断当前编译的是否是生产环境，将其写在webpack.config.js文件头部：

var isProduction = process.env.NODE_ENV === 'production'

下面则是webpack.config.js配置的一部分，那么后续将根据isProduction来决定向conf.optimization/conf.plugins中加入哪些压缩插件。

const conf = { optimization: {}, plugins: [] }

压缩JS：uglifyjs-webpack-plugin

该插件用于压缩js代码，最终编译结果就是只有一行内容的密密麻麻的很长很长的JS文件，好处就是文件变小了。

    var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
    conf.optimization['minimizer'] = [
        new UglifyJsPlugin({
            include: /\.js$/,
            parallel: true,
            uglifyOptions: {
                output: {
                    comments: false,
                },
            }
        })
    ];

上述配置项的意思是：将.js文件压缩，采用多线程并发，删除JS代码中的注释。

提取CSS：mini-css-extract-plugin

该插件用于把CSS提取到独立的文件中，这样JS和CSS可以作为2个请求并行下载，页面打开速度可以再快一些。

在以前的webpack版本中都是使用extract-text-webpack-plugin，但是在webpack4中已经改为mini-css-extract-plugin了。

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
    var cssPlugin = new MiniCssExtractPlugin({
        filename: '[name].[hash].css',
        chunkFilename: '[id].[hash].css',
    });
    conf.plugins.push(cssPlugin);

注意，只有在isProduction==true的时候再加入这个插件。

除了加入plugins之外，还需要在css的loader部分进行修改：

 {
            test: /\.css$/,
            use: [isProduction ? {
                loader: MiniCssExtractPlugin.loader,
            }: {
                loader: 'style-loader',
            }, {
                loader: 'css-loader',
                options: {
                    modules: true,
                    importLoaders: 1,
                    localIdentName: '[name]_[local]_[hash:base64:5]',
                    camelCase: true
                }
            }],
        }

一般我们webpack配置都是css-loader+style-loader，但是这样的话css是编译在JS里的，并且页面打开时js会把css写到<head>中的<style>标签中。

为了在生产环境加速，我们在处理css文件的最后利用mini-css-extract-plugin提供的loader，把css输出到独立的css文件中去，这样js文件中就没有样式相关的代码了。

大家要注意，在生产环境是使用mini-css-extract-plugin 取代 s tyle-loader，在开发环境则依旧使用style-loader即可，因为大概了解了一下mini-css-extract-plugin对css修改的热加载支持不是很完善，为了不影响开发体验，其作者也建议仅在生产编译时使用。

压缩CSS：optimize-css-assets-webpack-plugin

该插件配合mini-css-extract-plugin使用，对其输出的css文件进一步压缩，删除空白和注释等。

    var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
    var cssOptPlugin = new OptimizeCssAssetsPlugin({
        cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
        },
        canPrint: true
    });
    base.plugins.push(cssOptPlugin);

把它创建出来，加入到plugins即可，再去看看css会发现css文件也变成了密密麻麻的一行。

HTTP压缩

最后，别忘记给你的webserver开启gzip压缩，效果非常显著。

其他

在项目比较大的时候，编译过程中遇到了nodejs OOM内存耗尽的问题，这需要通过调大nodejs的内存限制解决。

因为我是通过npm run build命令间接执行的webpack程序，因此只能通过 linux 环境变量的方式来间接影响nodejs的内存限制，即在编译production环境的时候导出如下环境变量：

export NODE_ENV=production
export NODE_OPTIONS=--max-old-space-size=4096

其中NODE_ENV是用于声明编译环境，之前我们在webpack.config.js中有过判定逻辑。

NODE_OPTIONS相当于nodejs的命令行参数，我们传递max-old-space-size=4096用于配置内存限制为4GB，避免编译过程OOM。

博主无私的分享着知识，你愿意送他一顿热腾腾的早餐吗？

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

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

图解物联网

［日］ NTT DATA集团、河村雅人、大塚纮史、小林佑辅、小山武士、宫崎智也、石黑佑树、小岛康平 / 丁　灵 / 人民邮电出版社 / 2017-4 / 59.00元

本书图例丰富，从设备、传感器及传输协议等构成IoT的技术要素讲起，逐步深入讲解如何灵活运用IoT。内容包括用于实现IoT的架构、传感器的种类及能从传感器获取的信息等，并介绍了传感设备原型设计必需的Arduino等平台及这些平台的选择方法，连接传感器的电路，传感器的数据分析，乃至IoT跟智能手机/可穿戴设备的联动等。此外，本书以作者们开发的IoT系统为例，讲述了硬件设置、无线通信及网络安全等运用Io......一起来看看《图解物联网》这本书的介绍吧!

码农工具