当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。
优化方式通常有以下方式:
一、路由懒加载:
把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
参考链接:
二、不打包第三方库:
减少 vendor.js 的体积,从本质上来解决这种问题。
参考链接:
小编测试:
将 vue.js 不打包
externals: {
'vue': 'Vue'
}
效果对比
加入 vue.js | |
不加入 vue.js |
vendor.js(当前包含 vue-router.js),设置 vue.js不加入打包后,vendor.js 文件过大问题得到根治。除了vue.js,还有其它第三方库,比如element-ui,layer等优秀的插件和框架都可以通过这种方式来解决。
作者:黄河爱浪 QQ:1846492969,邮箱:[email protected]
微信公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号