webpack怎么压缩js-用webpack的UglifyJsPlugin怎样压缩一个全是函数的js文件

这段时间因为免费试用了 / 一台阿里云的服务器,配置是 2核4G 2M,

因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加载的 js 过大而引起的。因此本文将主要讲解Vue项目打包后js、css、svg等文件过大的解决办法。

通过引入 compression-webpack-plugin 插件来打包,然后开启 nginx gzip 来解决问题

配置 compression-webpack-plugin 前后打包对比,我们查看 dist目录,能够发现大于10KB的

js

,

css

等文件已经被压缩了

第一步:需要安装 postcss , postcss-loader 和 postcss-preset-env 三个包。

第二步:在 的 css 的 loader 里配置 postcss-loader 。

第三步:配置 ,然后配置 postcss-preset-env 插件,用来读取 文件中的 browserslist 配置。

第四步:在 文件添加 browserslist ,配置需要支持哪些浏览器。

压缩 css 需要用到 optimize-css-assets-webpack-plugin 。

用法很简单,引入插件之后,在 plugins 中实例化即可。

lugins:

[

new

({

//

压缩webpack

后生成的代码较长时间,通常推到生产环境中才使用

compress:{

warnings:

false

}

}),

new

htmlWebpackPlugin({

//

webpack

指定目录(package内设置)生成静态HTML文件

title: