webpack-case
本项目致力于实现搭建更加稳定健壮,高性能的前端框架
插件说明
使用说明
安装：
npm install
运行
npm run dev
打包内测版本:
npm run build-demo
打包部署版本:
npm run build-demo
注意
⚠️ ：比较复杂的项目中，编译的时候对CPU和内存需求都会变大。需要内存2-3G。node本身，或者说v8本身有一个默认配置:Currently, by default v8 has a memory limit of 512mb on 32-bit systems, and 1gb on 64-bit systems. The limit can be raised by setting --max-old-space-size to a maximum of ~1gb (32-bit) and ~1.7gb (64-bit), but it is recommended that you split your single process into several workers if you are hitting memory limits.所以我们需要配置一下运行内存。修改ng.cmd,追加–max_old_space_size=4096 避免aot时内存溢出
优化性方案:
1.使用Devtool配置实现构建后的代码快速定位调试
2.设置小于1m的图片转为Base64编码存储,减少服务请求压力
3.采用babel-loader和进行多进程打包,优化打包速度
4.采用oneOf优化loader的重复解析调用
5.文件名添加contentHash值缓存文件,提高命中效率
6.将jq,vue,vuex,element采用cdn外部引入,减少项目体积及优化响应速度
7.使用Lighthouse行项目性能瓶颈筛查优化
8.使用jest构建多个测试单元,强化代码健壮性
9.弃用了optimize.OccurenceOrderPlugin，NoErrorsPlugin