vue-cli 首屏加载优化问题
2019/6/26 23:22:25
本文主要是介绍vue-cli 首屏加载优化问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build
会将所有的js代码打包为一个整体,
打包位置是 dist/static/js/app.[contenthash].js
类似下面的路由代码
router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Personal from '@/components/page/Personal' import Message from '@/components/personnal/Message' import Settings from '@/components/personnal/Settings' import Setlanguage from '@/components/personnal/children/Setlanguage'
npm run build
会打包成一个app.[contenthash].js
,这个文件会非常大,影响加载速度。
所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去
分模块打包需要下面这样使用 webpack的 require.ensure
,并且在最后加入一个 chunk名,
相同 chunk名字的模块将会打包到一起。
const Personal = r=>require.ensure([],()=>r(require('@/components/page/Personal')),'personal'); const Message = r=>require.ensure([],()=>r(require('@/components/personnal/Message')),'personal'); const Settings = r=>require.ensure([],()=>r(require('@/components/personnal/Settings')),'personal'); const Setlanguage = r=>require.ensure([],()=>r(require('@/components/personnal/children/Setlanguage')),'personal');
根据 chunname的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个 (除了app.js,manifest.js, vendor.js)
总结
以上所述是小编给大家介绍的vue-cli 首屏加载优化问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
这篇关于vue-cli 首屏加载优化问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南