码迷,mamicode.com
首页 > Web开发 > 详细

webpack externals减小构建物体积

时间:2020-08-13 11:48:35      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:htm   导出   html   图片   项目   span   end   lazy   img   

1、未使用externals

本项目以vue-cli脚手架为示例。未使用externals时,构建物中chunk-vendor.js体积90k。

技术图片

其中:vue代码会打包到chunk-vendor.js。

技术图片

 

 

 2、使用external

(1)vue.config.js修改

技术图片

 

其中:键,就是用npm install命令装的插件名称,如 npm i vue。值,就是js对外导出那个对象,这个需要打开源码看看。

 (2)html引入vue.js

技术图片

 

 (3)查看构建产物

技术图片

 

 减少65k(即90-25=65k)恰好是vue.runtime.js的大小。

技术图片

 

 

webpack externals减小构建物体积

标签:htm   导出   html   图片   项目   span   end   lazy   img   

原文地址:https://www.cnblogs.com/mengfangui/p/13490651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!