如何通过webpack进行css、js代码压缩
2020-06-22 04:25
42 查看
前端优化是每个前端工程师必须处理的事情,优化的目的在于让页面加载的更快,对用户操作响应更及时,为用户带来更好的用户体验,对于开发者来说优化能够减少页面请求数,能够节省资源。
前端里面包含的内容是丰富的,包括HTML,CSS以及JS和图片等各种各样的资源。因此前端优化是复杂的和必要的,下面总结一些优化的方法,可能不太全面,欢迎指正。
CSS压缩
关于css压缩是通过Webpack使用插件:
optimize-css-assets-webpack-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const optimizeCss = require("optimize-css-assets-webpack-plugin");
plugins: [ // 给文件头部添加本次打包信息 new webpack.BannerPlugin({ banner: "@buildTime: " + release.buildTime + "\n" + "@branch: " + release.branch + "\n" + "@commitId: " + release.commitId, }), new MiniCssExtractPlugin({ filename: "static/css/common.css", }), new optimizeCss(), ],
JS压缩
对js代码压缩采用的插件是:
terser-webpack-plugin,在此之前,最受欢迎的js压缩插件是:
uglifyjs-webpack-plugin,但是UglifyJs的弊端在于不能识别 const语法、不支持ES6的语法,发现uglifyjs-webpack-plugin 2.0版本的Release日志中,明确提示重新切换回到uglify-js,因为uglify-es被废弃了,所以如果需要ES6代码压缩,可以直接使用
terser-webpack-plugin
const TerserPlugin = require('terser-webpack-plugin');
optimization: { minimize: true, minimizer: [new TerserPlugin()], }, devtool: ""
相关文章推荐
- 如何通过webpack对css进行打包
- webpack代码压缩和css前缀补全
- requireJS中如何用r.js对js进行合并和压缩css文件
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
- Webpack3.x 通过Webpack加载Bootstrap的CSS/Scss/JS 及更改CSS样式
- 不使用webpack如何合并多个js文件,合并多个css文件
- webpack学习(六)打包压缩js和css
- 如何使用webpack打包多页面并且使 css,js,img在各自页面的目录文件夹下?
- 在UAP中如何通过WebView控件进行C#与JS的交互
- webpack-dev-conf r.js文件,如何进行后台数据模拟?
- webpack 打包压缩js和css的方法示例
- 如何使用webpack打包html+css+js+img+font?
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
- vue项目打包之后静态资源不显示问题及如何让webpack不打包某个静态资源(js,css,img)
- 高性能WEB开发之JS、CSS的合并压缩
- Asp.net中如何过滤html,js,css代码
- 如何使用jquery动态加载js,css文件实现代码
- 干货!如何利用Photoshop CC进行自动切图和获取CSS代码
- Webpack 实现 Node.js 代码热替换
- [转]yuicompressor-2.4.2,js,css代码压缩