Ykit 是一个基于 Webpack 的打包工具,它利用插件机制封装了各种 JavaScript 应用的配置,选择和安装合适的插件即可开始构建你的 App。Ykit 内置了各种优化和辅助工具,让你的应用开发更稳定、高效。
- 包含 hot reloading 本地 server,无需在项目中配置
- 比 Webpack 更快的编译打包速度
- 通过插件可快速定制开发环境
- 内置 eslint 和代理工具
本地 server 访问页面资源加载和页面渲染时间:
资源数 | Webpack 耗时 | Ykit 耗时 |
---|---|---|
3 assets | 9s | 5s |
10 assets | 18s | 5s |
20 assets | 33s | 5s |
build(包含压缩)时间:
资源数 | Webpack 耗时 | Ykit 耗时 |
---|---|---|
3 assets | 10s | 7s |
10 assets | 20s | 16s |
20 assets | 38s | 32s |
测试工程:https://github.com/roscoe054/ykit-benchmark
npm install ykit -g
mkdir ykit-app && cd ykit-app
ykit init
cd .. && ykit server
- 用浏览器访问
http://localhost/ykit-app/index.html
初始化结束后,项目中会生成一个名为 ykit.js
的配置文件:
module.exports = {
plugins: [],
config: {
export: ['./scripts/index.js', './styles/index.css'],
modifyWebpackConfig: function modifyWebpackConfig(baseConfig) {
// 更改 Webpack 配置
return baseConfig;
}
},
hooks: {},
commands: []
};
- plugins - 插件是对一类配置和功能的封装,通过安装插件可以快速搭建开发环境
- config.exports - 资源入口
- config.modifyWebpackConfig - 用来更改 Webpack 现有配置的函数
- hooks - 打包过程钩子
- commands - 自定义命令
通过插件快速搭建不同类型的应用,可参考以下示例。
访问 ykit.ymfe.org 来获取更多 ykit 的文档。