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。

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Code Reading

Diomidis Spinellis / Addison-Wesley Professional / 2003-06-06 / USD 64.99

This book is a unique and essential reference that focuses upon the reading and comprehension of existing software code. While code reading is an important task faced by the vast majority of students,......一起来看看《Code Reading》这本书的介绍吧!

码农工具