webpack之代码压缩

代码压缩的作用 / 好处

  • JS和CSS经过压缩之后体积变小,也就是文件占用内存会变小
  • 在访问网站的时候要加载JS和CSS,体积越小,加载越快。
  • 网站打开的速度也就越快,有利于用户体验。
  • 混淆:经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 Javascript 源代码。

文件压缩

1.js文件的压缩

内置了uglifyjs-webpack-plugin

webpack4,mode设置为production默认开启代码压缩

2.css文件的压缩

 使用optimize-css-assets-webpack-plugin

 同时使用cssnano

配合MiniCssExtractPlugin插件把css单独分离成一个文件

配置:

plugins:[

   new OptimzeCSSAssetsPlugin({

      assetNameRegExp:/\.css$/g,

      cssProcessor:require('cssnano')
   })

]

3.html文件的压缩

依赖html-webpack-plugin插件

配置:(设置参数)

plugins: [
    new HtmlWebpackPlugin({ // 打包输出HTML
        title: 'Hello World app',
        minify: { // 压缩HTML文件
            removeComments: true, // 移除HTML中的注释
            collapseWhitespace: true, // 删除空白符与换行符
            minifyCSS: true// 压缩内联css
        },
        filename: 'index.html',
    }),
]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值