webpack压缩

最新推荐文章于 2024-05-13 10:08:00 发布
最新推荐文章于 2024-05-13 10:08:00 发布
阅读量352 收藏
点赞数
分类专栏： webpack 文章标签： webpack 压缩 html img css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43887108/article/details/103315665
版权
本文介绍了如何使用webpack4对html、css、js和img进行压缩，通过配置webpack实现一个约2MB项目压缩到几百KB的目标。涉及postcss-loader及autoprefixer的使用。
摘要由CSDN通过智能技术生成

webpack4压缩html、css、js、img

webpack4压缩html、css、js、img

简单了解下webpack，然后就用webpack来压缩打包，一个接近2M的小项目最后压缩到几百KB。

 "devDependencies": {
   
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.3.0",
    "html-webpack-plugin": "^3.0.7",
    "image-webpack-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^2.3.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },

let path = require('path');
let webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin =
最低0.47元/天 解锁文章
！YYYJM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发——性能优化，包体积压缩82%、打包速度提升65%
helloyangkl的博客
02-17 716
前端开发——性能优化，包体积压缩82%、打包速度提升65%
前端高级进阶：如何更好地优化打包资源
好记性不如烂键盘
05-03 784
在前端中但凡谈到打包，肯定要提及到 webpack，毕竟它现在已经是最为流行的打包工具。但 webpack 更多地是表现在 术 上，于是我决定写这篇文章，更多地讲解一些关于 道 的。 对于一个前端而言，生产环境的静态资源优化，它既是面试中的高频问题，同时也最容易成为平时工作中的 OKR/KPI。如果你经常致力于优化前端打包提及，必然会对一些数字极为敏感，比如： lodash 和 react gz...
推荐使用：Webpack 的压缩神器 —— compression-webpack-plugin
最新发布
gitblog_00036的博客
05-13 518
推荐使用：Webpack 的压缩神器 —— compression-webpack-plugin 项目地址:https://gitcode.com/webpack-contrib/compression-webpack-plugin 在前端开发中，优化资源加载速度是提升用户体验的关键一环。为了实现这一点，我们可以借助 Webpack 插件 compression-webpack-plugin 来对...
前端文件打包体积优化
liang526011569的博客
09-16 1675
一、去除生产环境sourceMap vue项目打包之后js文件夹中，会自动生成一些map文件，占用相当一部分空间 map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 生产环境是不需要sourceMap的，如下配置可以去除 module.exports = { //去除生产环境的productionSourceMap productionSourceMap:
优化vue打包后的体积大小(1)
范天缘的博客
09-29 1281
在vue.config加上一句代码就可以了 productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 加上以后我的项目打包后从13m变成3.47m productionSourceMap等于false时,不会生成map文件，map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。如果不需要定位问题，并且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小，也可以
前端打包性能优化
01-20
前端打包优化如何查看打包后的文件优化方案使用GZIP压缩资源文件安装压缩插件修改webpack配置文件config/indexnginx中开启优先 加载Gzip文件统一打包公用的npm 依赖包 如何查看打包后的文件 正常往往的npm run build 就可以，但是一般项目中会使用eleemnt-ui呀或是echarts等等，打出的包会非常大，因此需要优化。 Step1: package.json文件中添加script: 需要先安装：npm install –save-dev webpack-bundle-analyzer 然后配置插件； pack: npm_config_report=
webpack压缩js
08-22
在处理JavaScript时，Webpack 提供了一种方式来压缩和混淆代码，以提高页面加载速度并保护源代码。 压缩JavaScript的主要目标是减少文件大小，从而加快网页的加载速度。这通常通过删除不必要的字符，如空格、换行符...
webpack相关图片压缩插件
06-20
由于这几个图片压缩的插件下载会经常失败，所以我整理了一下。 文件内容： imagemin-gifsicle，imagemin-jpegtran，imagemin-optipng，imagemin-svgo 直接解压，放到node_modules文件夹下即可。 配合我之前发布的...
esmangle-webpack-plugin:基于ESMangle的Webpack压缩程序
05-11
ESMangle Webpack插件 基于。 几乎与一样有效，同时速度明显更快。 一直使用此插件，以便您正在开发将要部署的相同代码。 避免在生产中出现意外，尤其是对于基于Angular的项目。 用法 var ESMangleWebpackPlugin ...
浅谈用Webpack路径压缩图片上传尺寸获取的问题
08-28
这种方法可以确保在图片路径被Webpack压缩的情况下，仍能正确地处理和验证图片。 总结来说，处理Webpack路径压缩后的图片上传问题，我们需要理解Webpack对图片资源的处理方式，并利用`FileReader`的API来获取图片的...
使用webpack4编译并压缩ES6代码的方法示例
10-17
在本文中，我们将详细介绍如何使用 Webpack 4 编译并压缩 ES6 代码，以便在不支持 ES6 的环境下运行。 首先，我们需要全局安装 Webpack 4。在命令行中输入以下命令： ```bash npm install webpack -g ``` 接下来...
【前端】性能优化——webpack 打包压缩
七镜的博客
02-19 1685
写到这儿，打包压缩的性能优化已经告一段落了，这块其实以前也做过一点，现在也算回顾了一下，接下来可以把一些静态文件（包括js、css、img等等）上传至cdn，来进一步加速，各位友友有其他性能优化的建议，也可以一起交流一波，互相学习学习！
webpack处理CSS文件，打包到单独的文件、压缩、以及兼容性处理
jieyucx的博客
06-14 5040
兼容性在以前一直是个比较令大家头疼的事情，尤其是那时候还得兼容IE，webpack肯定是考虑到了这些，实现样式兼容性，我们需要借助几个loader。这就是本章的内容拉，webpack处理css文件打包到单独的文件、压缩、以及兼容性处理。在以前的章节中，我们配置过的生产环境的打包文件，webpack.prod.js。我们去控制台将往速调慢，然后运行打包好的index.html文件。用法很简单，引入，然后在plugin配置对象中添加就可以了。如图，css文件已经被处理成了单独的文件了。文件加载时，会创建一个。
Webpack中压缩代码文件
越陌度阡
01-04 934
在开发完成后，代码正式上线都需要对代码进行压缩，这样代码资源会变的更小，访问速度也会变的更快。在Webpack 4.x以上版本以上内置了uglifyjs-webpack-plugin 插件，会对JS文件自动压缩，不需要做其它的任何操作。也可以手动安装这个插件，设置一些另外的参数，比如开启并行压缩，加快打包的速度。
vue项目打包后文件过大怎么办，如何优化加载速度
前端
12-25 1万+
路由懒加载 const Home = () => import('./views/Home.vue'); const MyInfo = () => import('./views/MyInfo.vue'); 在.babelrc中 "plugins": ["@babel/plugin-synt
JS逆向|webpack的各种解法，最后一种简直是王炸。
热门推荐
Python3 爬虫实战 1:应对特殊字体,爬取猫眼电影实时排行榜
05-11 1万+
关注它，不迷路。本文章中所有内容仅供学习交流，不可用于任何商业用途和非法用途，否则后果自负，如有侵权，请联系作者立即删除！一.概念‍webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个...
webpack压缩和webpack-cli的作用
qq_34754747的博客
07-20 2671
方式二eval混淆，也是最早JS出现的混淆加密，据说第一天就被破解，修改一下代码，alert一下就可以破解了。其实JS加密（混淆）是相对于可读性而言的，其实真正有意义的就是压缩型混淆uglify这一类，即可减少体重，也可减少可读性。没有永恒的黑，也没有永恒的白。方式三也不能排除部分商业源代码使用hash类型混淆源代码，比如miniui使用的JSA加密,fundebug使用的javascript-obfuscator。方式一压缩类型是目前前端性能优化的常用工具，以uglify为代表。......
网页爬虫之WebPack模块化解密（JS逆向）
z_ipython的博客
04-26 4701
然后重写 window[“webpackJsonp”] 数组的 push( ) 方法为 webpackJsonpCallback( ),也就是说 window[“webpackJsonp”].push( ) 其实执行的是 webpackJsonpCallback( ),window[“webpackJsonp”].push( )接收三个参数,第一个参数是模块的ID,第二个参数是 一个数组或者对象,里面定义大量的函数,第三个参数是要。所有的资源都是通过JavaScript渲染出来的。
webpack使用笔记（五）代码压缩与文件分离
qq_42062727的博客
07-30 545
配置完有关 CSS loader 后，还有一个问题，我们不想将 CSS 都插入到 style 标签中，如果 CSS 样式代码很多，会导致生成的 HTML 文件很大，我们希望使用 <link> 标签引入打包后的 CSS 文件（将 CSS 单独提取出来），这时候就要使用一个插件：mini-css-extract-plugin。 下载：yarn add mini-css-extract-plugin -D。 配置： // webpack.config.dev.js let MiniCssExtract
webpack压缩img
05-30
要使用webpack压缩图片，可以使用image-webpack-loader插件。首先需要安装该插件： ``` npm install image-webpack-loader --save-dev ``` 然后在webpack.config.js中配置该插件： ```javascript module.exports ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值