最近在弄公司的老项目,这个项目是之前我自己搭建的,由于当时react不是很熟练,也没有独自搭建大型react项目的经验,只能照葫芦画瓢搭起了一个项目,然而随着业务的复杂,每次启动项目都要等好几分钟,项目打包上线也要200多秒,最近终于想把这个问题彻底解决一下,于是查看打包后的文件发现有30M,这也太大了。进去build
目录,看到里面有一个map文件很大,肯定是这里出了问题,查阅资料得知,map文件是webpack的在devtool的sourceMap中配置的,便于定位错误的问题。于是在webpack.config.js
中增加了GENERATE_SOURCEMAP=false
这个环节变量,在生产环境中去掉了生成的map文件。
然后我又重新进行了打包操作,发现包的体积确实变小了,成了5点多M,然而打包时间却并没什么变化,不行,还得继续搞,看了一些文章,说是配置dll可以把第三方包单独打包成一个模块,下次不用再打包这些第三方库,这样就大大节省了打包时间,然而,dll的配置却异常的繁琐,查询了其他的文章,最后发现hard-source-webpack-plugin
这个插件,配置更简单
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ......
plugins: [
new HardSourceWebpackPlugin() // <- 直接加入这行代码就行
]
}
只需上面几行代码,然后打包测试,第一次打包有原来的200S变成了45S,然后有执行了一次变成了15S,速度提升了好多倍
参考文章