美文网首页
webpack文件压缩

webpack文件压缩

作者: 小蜗牛的碎碎步 | 来源:发表于2019-11-19 18:06 被阅读0次
HTML

html-webpack-plugin

const HTMLWebpackPlugin = require("html-webpack-plugin");

new HTMLWebpackPlugin({
            template:path.join(__dirname,'src/index.html'),//待压缩的文件路径
            filename:'index.html',//打包后的文件名称
            chunks:["index"],
            inject:true,
            minify:{//是否使用文件压缩
                html5:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minifyCSS:true,
                minifyJS:true,
                removeComments:false
            }
        })
CSS

使用optimize-css-assets-webpack-plugin和cssnano

const OptimizeCSSAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
plugins:[
        new OptimizeCSSAssetsWebpackPlugin({
            assetNameRegExp:/\.css$/g,
            cssProcessor:require('cssnano')
        })
    ]
JS

webpack4已经内置了uglifyjs-webpack-plugin插件,自动压缩js文件,也可以自定安装,设置压缩相关参数

相关文章

  • webpack 代码压缩

    js文件压缩 webpack 4 内置了uglifyjs-webpack-plugin,js默认是压缩过的 css...

  • webpack学习笔记(3)

    1、HTML、CSS和JS代码压缩 JS文件的压缩webpack4内置了uglifyjs-webpack-plug...

  • webpack文件压缩

    HTML html-webpack-plugin CSS 使用optimize-css-assets-webpac...

  • 关于webpack打包问题

    assets里面的文件webpack会被打包压缩static里面的文件不会被打包 压缩所以 如果自己的文件解析不到...

  • 优化资源

    文件最小化/文件压缩 js和css文件通过gulp,webpack等工具合并、压缩,减少用户流量,小图片可以在打包...

  • Web性能优化

    1、压缩及合并资源使用webpack或Parcel压缩图片、合并CSS和JS文件在线压缩图片网站:https://...

  • vue打包及nginx设置gzip压缩

    webpack有一个文件压缩的插件,可以将大文件压缩成gzip的格式。使用起来也非常简单,先安装:npm inst...

  • 前端性能优化

    1,压缩合并文件,包括压缩图片,精灵图,webpack/gulp打包 2,图片懒加载 3,图片加载队列 4,cdn缓存

  • 前端的项目优化

    如何进行项目优化呢?1,文件合并 减少http请求,合并css js 文件2,文件体积压缩。利用webpack,G...

  • webpack打包+热部署+maven打包

    webpack打包+热部署+mvn打包 webpack打包的作用:最后生成一个或者多个压缩后的js,css文件和一...

网友评论

      本文标题:webpack文件压缩

      本文链接:https://www.haomeiwen.com/subject/xgrgictx.html