webpack打包优化通过cdn引用element-ui

用webpack打包项目的时候,当引入第三方库时,往往打出来的包vender.js会很大,这时候用webpack提供的externals属性。externals可以将依赖的第三方库从打包文件剔除,大大减小了文件包大小,同时大幅提升编译效率。已element-ui为例,具体配置如下:

第一步:配置externals
因为element-ui依赖vue 两者都要配置
webpack打包优化通过cdn引用element-ui_第1张图片
第二步:引入js文件
用externals配置后,将依赖的js库文件通过cdn或者本地文件的方式引入。注意通过script标签引入时,因为element-ui依赖vue ,所以vue要放在element-ui前面,否则异常
webpack打包优化通过cdn引用element-ui_第2张图片
第三步:代码编写
将ElementUI引入,组件注册代码从代码中删除 import ElementUI from ‘element-ui’ 和 Vue.use(ElementUI) ,否则会报异常 Uncaught ReferenceError: ElementUI is not defined
webpack打包优化通过cdn引用element-ui_第3张图片
优化完成,通过打包命令可以看到打包效率大幅提升

你可能感兴趣的:(webpack)