vue按需加载组件 ----3种方法 - 好文

1. vue异步组件技术

* vue-router配置路由，使用vue的异步组件
<https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6>
技术，可以实现按需加载。
*
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js
允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：

Vue.component('async-example', function (resolve, reject) { setTimeout(
function () { // 将组件定义传入 resolve 回调函数 resolve({ template: '<div>I am
async!</div>' }) }, 1000) })
工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。这里使用
setTimeout 只是为了演示，实际上如何获取组件完全由你决定。推荐配合 webpack 的代码分割功能
<https://webpack.js.org/guides/code-splitting/> 来使用：

Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 require
语法告诉 webpack // 自动将编译后的代码分割成不同的块， // 这些块将通过 Ajax 请求自动下载。 require([
'./my-async-component'], resolve) })
举例如下：vue-router路由文件中的写法
{ path: '/promisedemo', name: 'PromiseDemo', component: resolve => require([
'../components/PromiseDemo'], resolve) }
2. es6提案的import()

*
vue官方文档：路由懒加载(使用import())
<https://router.vuejs.org/zh-cn/advanced/lazy-loading.html>

*
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
* const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
//const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */
'../components/ImportFuncDemo')
* //const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo
' */'../components/ImportFuncDemo2')
* export default new Router({ routes: [
* { path: '/importfuncdemo1', name: 'ImportFuncDemo1', component:
ImportFuncDemo1 },
* { path: '/importfuncdemo2', name: 'ImportFuncDemo2', component:
ImportFuncDemo2 }
* ]}
*
3.vue按需加载组件-使用webpack require.ensure

使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,

打包位置是 dist/static/js/app.[contenthash].js

类似下面的路由代码

router/index.js 路由相关信息,该路由文件引入了多个 .vue组件

* import Hello from '@/components/Hello'
* import Province from '@/components/Province'
* import Segment from '@/components/Segment'
* import User from '@/components/User'
* import Loading from '@/components/Loading'
执行 npm run build 会打包为一个整体 app.[contenthash].js ,这个文件是非常大,可能几兆或者几十兆,加载会很慢

所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去

分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk名,

相同 chunk名字的模块将会打包到一起

router/index.js 修改为懒加载组件

* const Province = r => require.ensure([], () => r(require(
'@/components/Province.vue')), 'chunkname1')
* const Segment = r => require.ensure([], () => r(require(
'@/components/Segment.vue')), 'chunkname1')
* const Loading = r => require.ensure([], () => r(require(
'@/components/Loading.vue')), 'chunkname3')
* const User = r => require.ensure([], () => r(require('@/components/User.vue'
)), 'chunkname3')
根据 chunkame的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个
(除了app.js,manifest.js, vendor.js)

分模块打包之后在 dist目录下是这样的, 这样就把一个大的 js文件分为一个个小的js文件了,按需去下载,其他的使用方法和import的效果一样

热门工具换一换