转:webpack代码压缩优化
压缩代码
18 天前30前端开发
从 Webpack 4 开始,默认情况下使用 terser 压缩生产环境下的输出结果。Terser 是一款兼容 ES2015 + 的 JavaScript 压缩器。与 UglifyJS(许多项目的早期标准)相比,它是面向未来的选择。有一个 UglifyJS 的分支—— uglify-es,但由于它不再维护,于是就从这个分支诞生出了一个独立分支,它就是 terser。
尽管 webpack 4 默认情况下会压缩输出,但如果您想进一步调整压缩行为或更换压缩器,那么,最好了解如何自定义压缩。
压缩 JavaScript
所谓压缩就是将代码变的更小,安全转换是指通过重写代码而不改变代码逻辑。这方面的好例子包括重命名变量,甚至是删除整个的访问不到的代码块(if (false)
)。
不安全的转换可能会破坏代码,因为它们可能会丢失底层代码所依赖的隐含内容。例如,Angular 1在使用模块时需要特定的函数参数命名。除非在这种情况下采取预防措施,否则重写参数会破坏代码。
修改 JavaScript 压缩处理器
在 Webpack 4 中,通过两个配置字段控制压缩过程:optimization.minimize
字段切换压缩处理器,而 optimization.minimizer
数组用来配置压缩处理器。
为了调整默认值,我们将 terser-webpack-plugin 附加到项目中,以便可以调整它。
首先,请将插件包含在项目中:
npm install terser-webpack-plugin --save-dev
要将其附加到配置,请首先为其定义一个局部配置:
webpack.parts.js
const TerserPlugin = require("terser-webpack-plugin");
exports.minifyJavaScript = () => ({
optimization: {
minimizer: [new TerserPlugin({ sourceMap: true })],
},
});
将其合并到主配置:
webpack.config.js
const productionConfig = merge([
parts.clean(PATHS.build),
parts.minifyJavaScript(),
...
]);
如果现在执行 npm run build
,您应该看到与之前相同的结果。
默认情况下禁用源映射。您可以通过
sourceMap
标志启用它们。您应该检查 terser-webpack-plugin 以获取更多选项。
要调整 Terser,请附加
terserOptions
相关选项到插件中。
其他压缩 JavaScript 的方法
虽然默认值和 terser-webpack-plugin 适用于此用例,但您可以考虑更多选项:
- babel-minify-webpack-plugin 依赖于 babel-preset-minify,它由 Babel 团队开发。
- webpack-closure-compiler 可以并行执行,有时比 babel-minify-webpack-plugin 的结果更小。closure-webpack-plugin 是另一种选择。
- butternut-webpack-plugin 在底层使用了 Rich Harris 的实验性 butternut 压缩器。
加快 JavaScript 执行速度
特定的解决方案允许您预处理代码,以便它运行得更快。它们补充了压缩技术,可以分为范围提升,预处理和提升解析。这些技术有时可能会增加整体包的大小,同时加快代码的执行速度。
作用域提升
从 Webpack 4 开始,它默认在生产环境下使用作用域提升。它将所有模块提升到单个范围,而不是为每个模块编写单独的闭包。这样做会减慢构建速度,但会为您提高包的执行速度。在 Webpack 博客上阅读有关作用域提升的更多信息。
将
--display-optimization-bailout
选项传递给 Webpack 以获取与提升结果相关的调试信息。
预执行
prepack-webpack-plugin 使用 Prepack,一个JavaScript 局部执行器。它重写了可以在编译时完成的计算,从而加快了代码执行速度。另请参阅 val-loader 和 babel-plugin-preval 以获取其他解决方案。
提升解析
optimize-js-plugin 通过包装立即执行函数的方式补充了其他解决方案,它增强了 JavaScript 代码最初解析的方式。该插件依赖于 Nolan Lawson 的optimize-js。
压缩 HTML
如果您使用 html-loader 处理 HTML 模板,则可以使用posthtml 对模板进行预处理。您还可以使用 posthtml-minifier 压缩 HTML。
压缩 CSS
clean-css-loader 使您可以使用流行的 CSS 压缩器 clean-css。
optimize-css-assets-webpack-plugin 是一个基于选项的插件,可以在 CSS 资源上应用选定的压缩器。使用 MiniCssExtractPlugin
可能导致重复的 CSS,因为它只合并文本块。OptimizeCSSAssetsPlugin
通过对生成的结果进行操作来避免这个问题,从而可以产生更好的结果。
配置 CSS 压缩
在可用的解决方案中,OptimizeCSSAssetsPlugin
最好的选择了。要将其添加到配置中,请先安装它和 cssnano:
npm install optimize-css-assets-webpack-plugin cssnano --save-dev
与 JavaScript 一样,您可以将该想法包含在部分配置中:
webpack.parts.js
const OptimizeCSSAssetsPlugin = require(
"optimize-css-assets-webpack-plugin"
);
const cssnano = require("cssnano");
exports.minifyCSS = ({ options }) => ({
plugins: [
new OptimizeCSSAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: options,
canPrint: false,
}),
],
});
如果您使用 构建分析章节中讨论的
--json
作为 Webpack 输出选项,则需要设置canPrint: false
然后,合并到主配置:
webpack.config.js
const productionConfig = merge([
...
parts.minifyJavaScript(),
parts.minifyCSS({
options: {
discardComments: {
removeAll: true,
},
// 在安全模式下运行 cssnano 从而避免潜在的不安全转换
safe: true,
},
}),
...
]);
如果您现在构建项目(npm run build
),您应该注意到 CSS 已经变得更小,因为注释也被去掉了:
Hash: f51ecf99e0da4db99834
Version: webpack 4.1.1
Time: 3125ms
Built at: 3/16/2018 5:32:55 PM
Asset Size Chunks Chunk Names
chunk.0.js 162 bytes 0 [emitted]
chunk.1.js 96.8 KiB 1 [emitted] vendors~main
main.js 2.19 KiB 2 [emitted] main
main.css 1.2 KiB 2 [emitted] main
vendors~main.css 1.32 KiB 1 [emitted] vendors~main
chunk.0.js.map 204 bytes 0 [emitted]
chunk.1.js.map 235 KiB 1 [emitted] vendors~main
...
compression-webpack-plugin 允许您将生成压缩文件的问题交给 Webpack 处理,从而可能节省服务器上的处理时间。
压缩图像
我们可以使用 img-loader、imagemin-webpack 和 imagemin-webpack-plugin 来减小图像大小。这些包会在底层使用一些图片优化处理器。
如同在性能章节中讨论的那样使用 cache loader 和 thread-loader 是一个好主意,因为它们具备更多的操作空间。
总结
压缩是您可以采取的最舒适的步骤,以使您的构建更小。回顾一下:
- 压缩过程会分析您的源代码,如果您使用安全转换,则将其转换为具有相同含义的较小形式。特定的不安全转换允许您达到更小的结果,同时可能破坏依赖于精确参数命名的代码。
- Webpack 默认使用 Terser 在生产环境下执行压缩。其他解决方案,例如 babel-minify-webpack-plugin,提供了相似的功能,但需要一些相应的依赖和配置。
- 除了JavaScript 之外,还可以压缩其他资源,例如 CSS、HTML 和图像。压缩这些资源需要特定的技术,这些技术必须依赖于特定的 loader 和插件。
转:webpack代码压缩优化的更多相关文章
- webpack 代码优化压缩方法
在配置基于webpack的react单页面脚手架时,公共依赖库代码打包至vender.js中,页面逻辑代码打包至app.js中,使用webpack-bundle-analyzer分析发现,两个js中包 ...
- vue-cli内部webpack的打包优化
在此之前,我们先谈谈前端项目的性能优化. 优化前端项目无非就是2方面的优化: 一.网络性能优化(重点) 减少请求数量(webpack的天职就是打包) 减少请求资源大小(压缩gzip,后端会完成) CD ...
- vue-cli3.x中的webpack配置,优化及多页面应用开发
官方文档 vue-cli3以下版本中,关于webpack的一些配置都在config目录文件中,可是vue-cli3以上版本中,没有了config目录,那该怎么配置webpack呢? 3.x初始化项目后 ...
- tomcat压缩优化和缓存策略
tomcat压缩内容 tomcat的压缩优化就是将返回的html页面等内容经过压缩,压缩成gzip格式之后.发送给浏览器,浏览器在本地解压缩的过程. 对于页面量信息大或者带宽小的情况下用压缩方式还是蛮 ...
- 教你如何写出高效整洁的 css 代码——css优化(转载)
css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...
- Google Pagespeed,自动压缩优化JS/CSS/Image
Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...
- Java开发代码性能优化总结
代码优化,可能说起来一些人觉得没用.可是我觉得应该平时开发过程中,就尽量要求自己,养成良好习惯,一个个小的优化点,积攒起来绝对是有大幅度效率提升的.好了,将平时看到用到总结的分享给大家. 代码优化的目 ...
- php分10个不同等级压缩优化图片
今天找到一个php写的压缩图片程序,可以分10个等级(0-9)来压缩,0等级时压缩比率不是很大,图片不会失真:随着压缩等级不断增大,图片会变得越来越不清晰,通常压缩后图片大小可以减少到原来的50%,压 ...
- Java开发中程序和代码性能优化
现在计算机的处理性能越来越好,加上JDK升级对一些代码的优化,在代码层针对一些细节进行调整可能看不到性能的明显提升, 但是我觉得在开发中注意这些,更多的是可以保持一种性能优先的意识,对一些敲代码时间比 ...
随机推荐
- python测试开发django-68.templates模板标签{% for %}
前言 有些标签类似这样: {% tag %} ,需要开始和结束标签 例如:{% tag %} ...标签 内容 ... {% endtag %},一般用于循环列表对象输出内容. for 标签 {% f ...
- ansible(三)
setup ansible_all_ipv4_addresses # ipv4的所有地址 ansible_all_ipv6_addresses # ipv6的所有地址 ansible_date_tim ...
- firefox修改user-agent
让firefox对web服务器伪装成任意浏览器,找一个iphone的useragent,瞬间firefox变身iPhone有木有,一般人我不告诉他嘿嘿 1.firefox地址栏中输入about:con ...
- applyMiddleware 沉思录
let newStore = applyMiddleware(mid1, mid2, mid3, ...)(createStore)(reducer, null); 给({ getState, dis ...
- SSH和SSM对比(一)
当下流行的两种企业开发MVC开源框架,是我们Java程序猿必备知识能力.MVC,即模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界 ...
- Nuxt项目支持import写法的最新解决方案
最近在看Nuxt开发vue项目的视频,视频中讲到Nuxt项目不支持es6的import写法.并提供了解决方案: 1.在package.json中添加我标红的部分: "scripts" ...
- flutter中的异步机制Future
饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...
- LeetCode 689. Maximum Sum of 3 Non-Overlapping Subarrays
原题链接在这里:https://leetcode.com/problems/maximum-sum-of-3-non-overlapping-subarrays/ 题目: In a given arr ...
- 验证码破解 | Selenium模拟登陆12306
12306官网登录的验证码破解比较简单,验证码是常规的点触类型验证码,使用超级鹰识别率比较高. 思路: (1)webdriver打开浏览器: (2)先对整个屏幕截屏,通过标签定位找到验证码图片,并定位 ...
- Linux下g++编译thread出错的的解决方法
错误如下图所示: 因为thread是C++11新加入的特性,所以我们在用g++编译的时候不能直接用,需要在g++后面加上 -std=c++0x -pthread 如果是gcc编译多线程的话则应该要用 ...