cssnano

Rollup+Ts构建前端应用 前言 最近接手一个新的需求，纯html模版开发，对于已经习惯前端工程化开发的我来说，再回到 html+css+js 的时代，着实有点苦难，于是利用 Rollup+Ts+Scss 来进行开发。 项目搭建 # 项目初始化 npm init # 安装需要的依赖 yarn add rollup typescript rollup-plugin-postcss rollup-plugin-typescript tslib -D 复制代码 rollup-plugin-typescript 插件依赖 tslib ,需要提前安装好，不然运行的时候会出现找不到 tslib 依赖的错误。 配置tsconfig.json // tsconfig.json { "compilerOptions" : { "outDir" : "es" , "target" : "ESNext" , "declaration" : true , "noImplicitAny" : true , "removeComments" : true , "noUnusedLocals" : true }, "include" : [ "src/**/*" , "./declaration.d.ts" ], "exclude" : [ "node_modules/**/*" ] } 复制代码

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 对完全不需要解析的库进行忽略