首页 > 其他分享 >#yyds干货盘点#前端优化之压缩

#yyds干货盘点#前端优化之压缩

时间:2022-10-18 22:03:35浏览次数:82  
标签:yyds 压缩 loader 盘点 webpack 干货 js config image

前端文件的压缩主要是资源图片以及js和css压缩,今天分享一下vue项目中的文件压缩方法。


压缩js和css

如果你使用的是 webpack v5 或更高版本,是开箱机带的功能,但是你的webpack是5以下或则希望自定义配置,那么需要安装 ​​terser-webpack-plugin​​​。如果使用 webpack v4,则必须安装 ​​terser-webpack-plugin​​ v4 的版本。

// vue.config.js
const TerserJSPlugin = require('terser-webpack-plugin');
....
chainWebpack: (config) => {
// 开启js、css压缩
config.plugin('TerserJSPlugin')
.use(new TerserJSPlugin({
terserOptions: {
output: {
comments: false // 去掉注释
},
warnings: false,
compress: {
// eslint-disable-next-line camelcase
drop_console: true,
// eslint-disable-next-line camelcase
drop_debugger: true,
// pure_funcs: ['console.log'] // 移除console
}
}
}));
}
图片压缩

安装图片压缩的loader​​image-webpack-loader​​​ 直接终端​​npm install image-webpack-loader -D​

// vue.config.js
...
module.exports = {
...
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true, // webpack 'debug'


作者:挣扎在温饱线上的前端农民工
链接:https://juejin.cn/post/7080066104613142559
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:yyds,压缩,loader,盘点,webpack,干货,js,config,image
From: https://blog.51cto.com/u_11365839/5768245

相关文章

  • 干货 | Elasticsearch 运维实战常用命令清单
    Elasticsearch最少必要知识实战教程直播回放背景球友反馈的实战问题:关于es的运维相关的,遇到一些问题!第一个问题:是关于集群迁移的,目前需要针对20亿的数据做迁移,如果文......
  • 《一年顶十年》干货读书笔记
    作者彪悍一只猫是范登读书首席社群顾问,一天的咨询费20万元。书非常薄,一共170+篇文章,每篇都很短,我花了2个多小时就读完了。以下的作者观点,非常有共鸣。摘抄下来,和大家共勉,一......
  • 干货 | Elasticsearch 开发实战常用命令清单
    Elasticsearch最少必要知识实战教程直播回放0、背景Elasticsearch具有一组丰富的易于理解的RESTAPI,这些API 均可如下几种方式通过HTTP调用进行访问。CurlPostma......
  • #yyds干货盘点# 面试必刷TOP101:最小覆盖子串
    1.简述:描述给出两个字符串s 和t,要求在s 中找出最短的包含t 中所有字符的连续子串。数据范围:,保证s和t字符串中仅包含大小写英文字母要求:进阶:空间复杂度  ,时间复杂......
  • #yyds干货盘点# 面试必刷TOP101:反转字符串
    1.简述:描述写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串。(字符串长度不超过1000)数据范围: 要求:空间复杂度 ,时间复杂度 示例1输入:"abcd"返回值:"dcba"示例2输......
  • #yyds干货盘点# 面试必刷TOP101:最长无重复子数组
    1.简述:描述给定一个长度为n的数组arr,返回arr的最长无重复元素子数组的长度,无重复指的是所有数字都不相同。子数组是连续的,比如[1,3,5,7,9]的子数组有[1,3],[3,5,7]等等,但是[1......
  • 盘点一个flask开发基础问题
    大家好,我是皮皮。一、前言前几天在Python钻石交流群【emerson】问了一个Flask基础的问题,提问截图如下:代码如下:@app.route('/zyh',methods=["GET","POST"])defzyh(......
  • #yyds干货盘点#前端优化的几个方法
    如何知道打包体积?打包构建的时候,使用--report命令:vue-cli-servicebuild--report复制代码打包结束后,会在dist目录里面生成一个reporthtml文件,里面会显示你打包体积分布情......
  • #yyds干货盘点# 常用 Shell 分析服务器日志命令2
    9、访问次数最多的10个文件或页面catlog_file|awk'{print$11}'|sort|uniq-c|sort-nr|head-10catlog_file|awk'{print$11}'|sort|uniq-c|sort-nr|head-20awk'......
  • #yyds干货盘点# 面试必刷TOP101:判断是否为回文字符串
    1.简述:描述给定一个长度为n的字符串,请编写一个函数判断该字符串是否回文。如果是回文请返回true,否则返回false。字符串回文指该字符串正序与其逆序逐字符一致。数据范围:要......