Vue 打包优化方案(解决 vendor.js 过大的问题)
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。优化方式通常有以下方式:一、路由懒加载:把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。参考链接:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html二、不打包第三方库:减少 vend...
·
博主推荐大家阅读我的另一篇文章:《教你搭建一个页面秒开的Vue项目》
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。
优化方式通常有以下方式:
一、路由懒加载:
把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
参考链接:
二、不打包第三方库:
减少 vendor.js 的体积,从本质上来解决这种问题。
参考链接:
小编测试:
将 vue.js 不打包
externals: {
'vue': 'Vue'
}
效果对比
加入 vue.js | ![]() |
不加入 vue.js | ![]() |
不同版本的 vue-cli 配置方式是不同的,cli4可以参考这个:https://blog.csdn.net/xzxlemontea/article/details/108879220
三、vue-cli4设置忽略的打包文件
<!-- 在 index.html 文件中引用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<!-- 在项目根目录中的 vue.config.js 文件中 -->
module.exports = {
productionSourceMap: false,
configureWebpack: {
externals: {
vue: 'Vue'
}
}
}
vendor.js(当前包含 vue-router.js),设置 vue.js不加入打包后,vendor.js 文件过大问题得到根治。除了vue.js,还有其它第三方库,比如element-ui,layer等优秀的插件和框架都可以通过这种方式来解决。
作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com
微信公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号
更多推荐
所有评论(0)