快速将Vue项目升级到webpack3的方法步骤-创新互联

前言

创新互联公司网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队,负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作,以确保网站外观精美、成都网站设计、成都做网站易于使用并且具有良好的响应性。

由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大。因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下:

测试目标

以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响

平台:M5 Note Build/MRA58K

系统:android 6.0

时间 before after
2017-08-10 13:00 920 511
2017-08-11 11:10 915 543

平均提升:42.55%

平台:MI 3C Build/KTU84P

系统:Android 4.4.4

时间 before after
2017-08-13 15:00 648 365
2017-08-14 17:10 648 377

平均提升:42.74%

平台:SM901 Build/MXB48T

系统:Android 6.0.1

时间 before after
2017-08-13 18:00 593 393
2017-08-14 15:50 575 392

平均提升:32.75%

以上数据,提升比例虽然有所差距,但是,最后的结果,都表明......你应该毫不犹豫的升级你的 webpack了。

问题来了,如何能快速且平滑的升级你的 webpack呢?这是我们今天的重点,前面都是铺垫,哈哈

升级webpack3

今天只以 vue项目来举例, vue-cli升级 w3简直不要太快哦,而且也有项目上线成功了,并且线上测试与本地测试结果基本一致。如果使用的是 react项目,用的又是脚手架的话,那么恭喜你,跟 vue-cli一样快,可参考 vue-cli的升级方式,如果你自己写的 w2的话加一个配置(可以体验跟 vue-cli一样的升级体验哦),然后升级相应扩展:

new webpack.optimize.ModuleConcatenationPlugin()

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:快速将Vue项目升级到webpack3的方法步骤-创新互联
网址分享:http://scyanting.com/article/djoiph.html