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代码,如下图
解决方案:使用Code Splitting 减少vue生成的文件大小,webpack.prod.conf文件设置
new webpack.optimize.CommonsChunkPlugin({ async: 'common', minChunks: (module, count) => ( count >= 2 ), }) 可以生成一个common文件来放每个组件的通用部分
相关推荐
Macuroon 2020-09-11
hline 2020-07-29
不知道该写啥QAQ 2020-07-18
helloxiaoliang 2020-06-21
xiaodaiwang 2020-06-11
不知道该写啥QAQ 2020-05-17
xiaofanguan 2020-05-11
HeliumLau 2020-05-03
tozeroblog 2020-02-21
webfullStack 2020-02-11
csm0 2020-01-12
yezitoo 2020-01-11
HeliumLau 2019-12-07
学知不足业精于勤 2019-11-30
心动 2019-11-17
王军强 2019-11-17
webfullStack 2019-11-17
Macuroon 2019-11-17