webpack抽离css，压缩css代码和 js代码

前言

在实际生产环境中，较少使用style-loader，css代码被打包到了 main.js里面，这时候就需要对css代码进行抽离优化。

module.exports = {module:{rules:[test: '/\.css$/',use:['style-loader',  // 减少使用'css-loader','postcss-loader']]}
}

抽离代码，压缩css js

使用 mini-css-extract-plugin 这个插件可以将css代码提取出来
同时可以使用optimize-css-assets-webpack-plugin插件压缩css代码
terser-webpack-plugin 压缩js代码

const miniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const terserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {module:{rules:[test: '/\.css$/',use:[miniCssExtractPlugin.loader, // 不使用style，使用插件提供的loader来处理css'css-loader','postcss-loader']]},plugins:{// 抽离css代码new miniCssExtractPlugin({filename: 'css/main.[contentHash:8].css'})}，// 优化，压缩代码optimization:{minimizer:[// 压缩 jsnew terserWebpackPlugin()// 压缩 css代码new OptimizeCSSPlugin()]}
}

另外：webpack4 内置了uglifyjs-webpack-plugin 插件，默认打包出的 JS 文件已压缩过

npm i optimize-css-assets-webpack-plugin@5.0.1 cssnano@4.1.10 -D

Gzip压缩需要和后端nginx配合

webpack抽离css，压缩css代码和 js代码相关推荐

webpack抽离和压缩css文件
1.为什么要抽离和压缩css文件在生产环境,css代码必须抽离和压缩,不然打包会把css文件打包到js文件中,体积会比较大.(执行这个js再把css解析出来,塞到html中,这样性能并不好) 2.抽 ...
Webpack 如何抽离、压缩 CSS 文件？
关于抽离.压缩 css 文件,主要目的是为了减小体积,提升性能. 如果为本地使用,仅需配置 style-loader 和 css-loader 即可.css-loader 解析 .css 文件为 cs ...
wxml代码支持js代码吗_如何取胜：代码支持者的建议
wxml代码支持js代码吗 I had the honor of asking three of the world's most famous software engineers six ques ...
Hybrid APP 混合开发模式的选择之路（六：JSBridge---Native代码与JS代码的通信桥梁）
原文出处:http://www.cnblogs.com/dailc/p/5931324.html JSBridge是Native代码与JS代码的通信桥梁.目前的一种统一方案是:H5触发url sche ...
鼠标爱心的html代码,网页js代码鼠标点击爱心特效（富强、自由、爱国、敬业、友善）...
效果图如下: js代码如下: script> var a_idx = 0; jQuery(document).ready(function($) { $("body").cl ...
js代码格式化(js代码格式化html标签)
可以分级的表格如何隐藏JS代码? [实例描述]分级的表格隐藏是指当用户单击第一行时,第一行后面的行都会隐藏:单击第二行时,则第二行下面的所有行会隐藏,依次类推. 实用计算器JS代码怎么写呢? srcE ...
按需加载图片、html代码、js代码，前端页面性能优化
加载一个比较长的页面,或者图片比较多的页面,如果把资源一次性全部加载,在网络不是很好的情况下可能造成页面留白现象,用户体验极差! 因此呢,我们可以把用户暂时不会看到或用到的资源先不加载,在某个条件下, ...
Freemarker解决Html代码和 JS代码中单引号和双引号转义问题。
使用Freemaker时Html代码单引号和双引号转义:<input type="text" class="promzh Jclear c999" sty ...
账号密码代码php,JS代码怎样实现记住账号密码
这次给大家带来JS代码怎样实现记住账号密码,JS代码实现记住账号密码的注意事项有哪些,下面就是实战案例,一起来看一下. 很多登录功能上都有个"记住密码"的功能,其实无非就是对coo ...

webpack抽离css，压缩css代码和 js代码

前言

抽离代码，压缩css js

webpack抽离css，压缩css代码和 js代码相关推荐

最新文章

热门文章

webpack抽离css，压缩css代码 和 js代码

前言

抽离代码，压缩css js

webpack抽离css，压缩css代码 和 js代码相关推荐

最新文章

热门文章

webpack抽离css，压缩css代码和 js代码

webpack抽离css，压缩css代码和 js代码相关推荐