webpack之代码压缩

最新推荐文章于 2025-04-15 10:33:53 发布

liuhua_2323

最新推荐文章于 2025-04-15 10:33:53 发布

阅读量719

点赞数 2

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/liuhua_2323/article/details/103345114

webpack 专栏收录该内容

14 篇文章

订阅专栏

代码压缩的作用 / 好处

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',
    }),
]