html 单页面项目，用什么压缩工具来压缩，图片，css，js好呢？

Question

html 单页面项目，用什么压缩工具来压缩图片，css，js好呢？
项目是通过cdn引入的vue ，还引入了一些本地的css，js，图片，现在项目要上线,想提高加载速度压缩一下，用什么工具好？一个一个这样压缩就算了。

Answer 1

npm install webpack webpack-cli --save-dev
npm install css-loader style-loader --save-dev
npm install file-loader image-webpack-loader --save-dev
npm install uglifyjs-webpack-plugin --save-dev

Answer 2

一般来说CSS压缩就看你用什么CSS预处理器，然后直接输出的时候加上压缩的命令就好。
如果没有使用预处理器，也可以通过你常用的CSS预处理器来处理。
比如说我会使用 stylus，那么在项目内 npm init -y 然后写一个脚本，然后 npm run style

{
  "scripts": {
    "style": "stylus ./css --compress",
  }
}

或者直接全部都用 gulp 简单一些，社区里面也有对应的教程 👉 使用Gulp进行Javascript以及css压缩合并

对于图片的话，我是不太建议在前端压缩的，很有可能会被压的不能用。最好就是让UI切图的时候勾选一下 “保存为web所用格式” 这样相同图片质量下图片占用的大小会少很多。

Answer 3

本地的 css 可以进行合并、压缩，最后本地只引入一个文件。

我常用的是在编辑器里面用 file-watcher 配置 scss 处理，直接合并压缩。
如果要用的话，建议使用 dart 版本的，这个处理起来速度快、特别是在要处理的文件比较多的情况下。

js的话，也是在编辑器里面直接配置的 uglifyjs 进行处理的，直接生成一个N迷你文件。