purgecss

初级分析：使用webpack内置的stats stats:构建统计信息 package.json中使用stats "scripts": { "build:stats":"webpack --env production --json > stats.json" } 复制代码 指定输出的json对象，输出一个json文件 Node.js 中使用 const webpack = require('webpack') const config = require('./webpack.config.js')('production') webacpk(config, (err, stats) => { if(err) { return console.error(err); } if(stats.hasErrors()) { return console.log(stats.toString("errors-only")) } console.log(stats); }) 复制代码 缺点：颗粒度太粗，看不出问题所在。 速度分析：使用speed-measure-webpack-plugin const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin') const smp = new

来源： oschina 链接： https://my.oschina.net/u/4399905/blog/4839617

1、使用 高版本 的 Webpack 和 Node.js 2、 多进程/多实例构建 ：HappyPack(不维护了)、thread-loader 3、压缩代码 webpack-paralle-uglify-plugin uglifyjs-webpack-plugin 开启 parallel 参数 (不支持ES6) terser-webpack-plugin 开启 parallel 参数 多进程并行压缩 通过 mini-css-extract-plugin 提取 Chunk 中的 CSS 代码到单独文件，通过 css-loader 的 minimize 选项开启 cssnano 压缩 CSS。 4、 图片压缩 使用基于 Node 库的 imagemin (很多定制选项、可以处理多种图片格式) 配置 image-webpack-loader 5、缩小打包作用域 exclude/include (确定 loader 规则范围) resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找) resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段) resolve.extensions 尽可能减少后缀尝试的可能性 noParse 对完全不需要解析的库进行忽略

网上有很多漂亮的网站模板，好看但是含太多无用的css和js，下面两种工具或许能够帮一些忙。 一是用PurgeCSS清理css，下面介绍使用方法。详细用法可以移步 https://www.purgecss.cn/ ，我这里只介绍简单用法。 安装： npm i -g purgecss 使用： 在目录下先建一个配置文件，名为purgecss.config.js，在里面将html和css写上，例子如下 module.exports = { content: ['*.html'], css: ['css/*.css'] } 再在目录下建立一个目录用以存放精简的css，本例中我起名style，然后再使用命令行 purgecss --config ./purgecss.config.js --output style/ 运行完成，就看到style目录下面生成了一些精简后的css 清理完css后感觉清爽多了，不过仍然要测试一下不同分辨率下的显示和一些效果的显示。 谷歌浏览器开发者工具中的coverage清除无用的js，实际上coverage不是清除js用的，是显示js的使用率和无用代码的。 这个使用很简单，打开这个网页，然后打开开发者工具，在开发者工具中找到More tools-> coverage，如下图 打开后，点reload button，重新加载页面，然后就可以看到各css和js的使用率了