脚本宝典收集整理的这篇文章主要介绍了

vue单页面应用使用vue-cli的打包问题

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

使用vue-cli来搭建vue页面 可以查看搭建和配置

vue单页面应用vue-cli的打包问题

问题1:每个页面按需加载,搭建中访问每个页面都会加载一个js,webpack输出的每个页面的js命名都是以数字命名。

解决方案:修改webpack.prod.conf.js文件

chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')

懒加载路由需要这样

const detail = r => require.ensure([], () =>r(require('@/pages/index/children/detail')), 'detail')

意思是给 chunk 命名,也算是分组,不会生成了no-name的chunk。这样build可以生成detail.js。

问题2:打包生成的每个页面的js文件都包含通用的vue组件和node_modules代码,如下图

clipboard.png

解决方案:使用Code Splitting 减少vue生成的文件大小,webpack.prod.conf文件设置

new webpack.optimize.CommonsChunkPlugin({
      async: 'common',
      minChunks: (module, count) => (
        count >= 2
      ),
    })
    
可以生成一个common文件来放每个组件的通用部分

总结

以上是脚本宝典为你收集整理的

vue单页面应用使用vue-cli的打包问题

全部内容,希望文章能够帮你解决

vue单页面应用使用vue-cli的打包问题

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过