内容简介:本文介绍的是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。
博主无私的分享着知识,你愿意送他一顿热腾腾的早餐吗?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- itops代码优化之前端代码压缩
- 性能优化 (十一) ProGuard 对代码和资源压缩
- Yii2压缩PHP中模板代码的输出
- 10 行 Python 代码,批量压缩图片 500 张,简直太强大了
- Android Studio 3.3 Beta 提供了新的 Android 代码压缩器 R8
- golang压缩和解压缩zip文件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Information
James Gleick / Vintage / 2012-3-6 / USD 16.95
James Gleick, the author of the best sellers Chaos and Genius, now brings us a work just as astonishing and masterly: a revelatory chronicle and meditation that shows how information has become th......一起来看看 《The Information》 这本书的介绍吧!