webpack完全指南:代码压缩

发布网友发布时间：2024-10-01 17:32

共1个回答

热心网友时间：2024-10-09 09:14

前端构建编译代码时，压缩代码也是很重要的，压缩后的代码体积减小，传输速度快，从而提升网页加速速度和减少网络传输流量。除此之外，还具有混淆源码的作用，由于压缩后的代码可读性非常差，就算别人下载到了网页的代码，也大大增加了代码分析和改造的难度。

压缩JS

目前最成熟的JavaScript代码压缩工具是UglifyJS，它会分析JavaScript代码语法树，理解代码含义，从而能做到诸如去掉无效代码、去掉日志输出代码、缩短变量名等优化。

在Webpackv4中，uglifyjs-webpack-plugin是被默认集成在生产模式中的。所以，默认打包出的JS文件就是压缩好的，如果你需要更多的自定义也可以对uglifyjs-webpack-plugin进行配置。

首先，安装uglifyjs-webpack-plugin：

npminstalluglifyjs-webpack-plugin--save-dev

然后，添加到你的webpack配置中：

constUglifyJsPlugin=require("uglifyjs-webpack-plugin");module.exports={optimization:{minimizer:[newUglifyJsPlugin()],},};

uglifyjs-webpack-plugin的可配置项：

test：测试匹配的文件，默认值：/\.js(\?.*)?$/i

module.exports={optimization:{minimizer:[newUglifyJsPlugin({test:/\.js(\?.*)?$/i,}),],},};

include：要被处理的文件。

exclude：不被处理的文件。

chunkFilter：判断哪些chunk可以被压缩（默认所有的chunk都会被压缩）。返回值为true则会被压缩，false则不会被压缩。

module.exports={optimization:{minimizer:[newUglifyJsPlugin({chunkFilter:(chunk)=>{//`vendor`块不压缩if(chunk.name==="vendor"){returnfalse;}returntrue;},}),],},};

cache：启动文件缓存，默认为false，默认的缓存目录路径：node_modules/.cache/uglifyjs-webpack-plugin。

parallel：使用多进程并行运行以提高构建速度，默认为false，推荐开启。

sourceMap：使用源映射将错误信息位置映射到模块（这将会减慢编译速度），默认为false。

uglifyOptions：UglifyJS压缩配置选项。

压缩CSS

CSS代码也可以像JS那样被压缩，目前比较成熟可靠的CSS压缩工具是cssnano，cssnano是能理解CSS代码的含义，而不仅仅是删掉空格，例如：

对于webpackv5或更高版本，官方推荐使用CssMinimizerWebpackPlugin，该插件是使用cssnano优化和压缩CSS，支持缓存和并发模式下运行。

首先，我们需要安装css-minimizer-webpack-plugin：

npminstallcss-minimizer-webpack-plugin--save-dev

接着在webpack配置中加入该插件：

constCssMinimizerPlugin=require("css-minimizer-webpack-plugin");module.exports={//...optimization:{minimizer:[//在webpack@5中，你可以使用`...`语法来扩展现有的minimizer（即`terser-webpack-plugin`），将下一行取消注释`...`,newCssMinimizerPlugin(),],},};压缩HTML

HtmlWebpackPlugin插件除了可以帮助我们简化HTML文件的创建，也可以压缩HTML文件。

首先，需要先安装HtmlWebpackPlugin插件：

npminstall--save-devhtml-webpack-plugin

添加到webpack配置文件中：

//webpack.config.jsconstHtmlWebpackPlugin=require("html-webpack-plugin");module.exports={plugins:[newHtmlWebpackPlugin()],};

如果不添加任何配置的话，会生成一个默认index.html文件，并自动注入所有的chunk和压缩。

也可以通过自定义配置参数，以下几个是常见的参数：

template：模板的路径，默认会去寻找src/index.ejs是否存在。

filename：输出文件的名称，默认为index.html。

inject：是否将资源注入到模版中，默认为true。

minify：压缩参数。在生产模式下（production），默认为true；否则，默认为false。

如果minify为true，生成的HTML将使用html-minifier-terser和以下选项进行压缩：

{collapseWhitespace:true,keepClosingSlash:true,removeComments:true,removeRedundantAttributes:true,removeScriptTypeAttributes:true,removeStyleLinkTypeAttributes:true,useShortDoctype:true}

热心网友时间：2024-10-09 09:17