项目打包优化是一个常常被谈及的话题,就像很多面试官看到你简历介绍说有过项目打包优化的经历,便会对此展开提问,做过哪些优化。
回到本文,项目开发中会使用的到moment.js用于处理各种时间问题(只能说真香,太好用了)。可是一旦直接引入之后,不关注打包体积,页面加载性能的话,你可以自动忽略了(手动捂嘴)。但只要关注的话,你就会发现它的体积是真的大,通过可视化界面可以看出
优化前
对于其中使用部分,我们也就是用到其中的一些函数,这些函数即使都写出来,也就是几KB。
这样引入之后增加了这么多体积便是不必要的。所以需要优化。
优化方案:IgnorePlugin
const webpack = require('webpack');
module.exports = {
//...其他配置
plugins: [
// 忽略 moment.js的所有本地文件
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
};
优化后
前后对比发现体积少了很多,然后你有说,不还是很大嘛,但是有时候还是架不住香嘛不是嘛,不过凡事无绝对,还是要视项目而定,如果仅仅只用一两项的话,还是建议自己写比较好。减少代码体积,虽然吐过开机Gzip压缩
的话,体积能打到17.3kb