美文网首页webpack 4
Webpack 4 学习08(压缩优化css)

Webpack 4 学习08(压缩优化css)

作者: 邢走在云端 | 来源:发表于2019-02-23 11:36 被阅读0次

压缩css,去除注释

  • 安装插件

    npm install --save-dev optimize-css-assets-webpack-plugin
    
  • 配置webpack.config.js

    • 头部引入插件

      const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") 
      
参数 意义
assetNameRegExp 正则表达式,用于匹配需要优化或者压缩的资源名。默认值是
/.css$/g
cssProcessor 用于压缩和优化CSS 的处理器,默认是 cssnano.
cssProcessorPluginOptions 传递给cssProcessor的插件选项,默认为{}
canPrint 表示插件能够在console中打印信息,默认值是true
discardComments 去除注释
  • plugins模块引入
 new OptimizeCssAssetsPlugin({
       assetNameRegExp:/\.css$/g,
       cssProcessor:require("cssnano"),
       cssProcessorPluginOptions:{
         preset:['default',{discardComments:{removeAll:true}}]
       },
       canPrint:true
     })
插件的引入
  • 运行打包命令之后就可以压缩

    webpack --mode development

相关文章

  • Webpack 4 学习08(压缩优化css)

    压缩css,去除注释 安装插件npm install --save-dev optimize-css-assets...

  • webpack压缩css和js

    压缩 CSS webpack5 貌似会内置 css 的压缩,webpack4 可以自己设置一个插件即可。 压缩 c...

  • webpack 代码压缩

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

  • webpack学习笔记(3)

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

  • 2019-07-22

    Vue项目优化 1、封装通用组件,组件化开发 2、样式尽量写在公共css里,利于webpack压缩 3、build...

  • webpack4的splitChunks分包

    自从webpack升级到4以来,号称零配置。代码会自动分割、压缩、优化,同时 webpack 也会自动帮你 Sco...

  • 前端的项目优化

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

  • webpack 小知识验证

    webpack优化 js 压缩 分部按需加载

  • CSS样式优化(2019-02-18)

    对于CSS优化可以从网络性能和css语法优化两方面来考虑。 1.css压缩 压缩css代码的工具:A、YUI co...

  • 缓存优化

    缓存优化的基本原理 Webpack 4 内置了压缩插件 TerserWebpackPlugin,且默认开启了缓存参...

网友评论

    本文标题:Webpack 4 学习08(压缩优化css)

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