最近这几天前端圈子估计都被Parceljs刷屏了。Parceljs主要特点为:
更多关于Parceljs的内容,请点这里
在Parcejs的官方网站上给出了与其它的打包工具的构建速度的对比结果,但是并没有给出测试的项目地址,所以花了点时间在React上做了下面的测试。
环境
node版本:v9.2.1
npm版本:5.6.0
项目地址
parceljs-react
webpack-react
两个项目都非常小,一共只有4个组件。引入了react的路由。
配置文件
parceljs没有配置
webpack的配置如下:
var path = require('path')
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: [".js", ".json", ".jsx"],
alias: {
components: path.resolve(__dirname, 'src/components/')
}
},
module: {
rules:[{
test: /\.jsx?$/,
use: 'babel-loader'
}]
}
}
对比结果
构建速度
parceljs:
webpack:
打包大小
parceljs:
webpack:
从对比结果可以看出,Parceljs在构建速度上确实比webpack要快很多,而在打包出来的大小上面,webpack打出来的包似乎要比parceljs打出来的包更小。。如果发现上面的内容有什么不对的地方,请指出,谢谢~