vue-cli不同引入文件方式之间的区别

最新推荐文章于 2025-01-07 11:26:47 发布

转载最新推荐文章于 2025-01-07 11:26:47 发布 · 870 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenxiangling/p/10476596.html

文章标签：

#javascript #ViewUI

本文详细介绍了Vue中路由组件的引入方式，包括按需加载和动态路由的实现，以及如何引入其他文件、依赖和样式的最佳实践。同时，探讨了资源加载策略，如静态资源的内联限制和优化方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、路由组件引入方式：

1.import component from 'componentPath' //该组件会被编译输出到app.js中

2.懒加载组件：

使用require()方法：

const component = resolve => require(['componentPath'], resolve) // 该组件会被单独编译输出js文件，按需加载

const component = resolve => require.ensure([], () => resolve(require('componentPath1')), 'chunkName') //多个组件编译输出一个js文件，只要给他们指定相同的chunkName即可

使用import()方法：

const component = () => import(/* webpackChunkName: "chunkName" */ './Foo.vue') // 该组件会被单独编译输出js文件，按需加载，多个组件编译输出一个js文件，只要给他们指定相同的chunkName即可

3.动态添加路由，主要用于router.addRoutes(routes: Array<RouteConfig>)方法动态生成新的路由(https://router.vuejs.org/zh/api/#router-addroutes)：

resolve => require([`a/b${c}.vue`], resolve) // b目录下的所有.vue文件会被编译输出到一个js文件中，项目较大时会造成该js文件非常庞大，首页加载慢等问题，不建议使用

() => import(`a/b${c}.vue`) //b目录下的每个.vue文件都会被单独编译输出js文件,(如果a.vue组件内引用了b.vue组件，则b.vue组件除了会被编译输出到a.vue编译输出的js文件外，b.vue还会再单独编译输出一个js文件)

建议：尽量不要使用动态添加路由,以免生成过多冗余的js文件，造成打包后项目臃肿的后果

二、引入其他文件

编译打包规则：如果a文件被引入到main.js中，则a文件会被导入到app.js中且不会再被重复导入到其他输出的文件，如果只在将被单独编译输出js的文件中引入a文件，则会被导入到该文件输出的js中，如果有多个将被单独编译输出js的文件引用a文件，则a文件会被分别导入到这些文件输出的js文件中，如果a文件较大且被多次引用合并会造成项目臃肿的问题(解决办法：在main.js中引入a文件)

1.require()方法(已被import取代)：

require('a.js') //a.js被导入到当前引用的文件中，在beforeCreated钩子之前被执行

require.ensure(['c.js'], () => {

　　//c.js加载完成，但未执行，a.js、b.js未加载未执行

　　require('a.js')

　　require('b.js')

　　//a.js、b.js加载执行完成

}, 'chunkName') // /a.js和b.js、c.js被编译输出一个js文件,按需加载，且会在当前文件渲染执行完后才执行(mounted钩子之后) //注：c.js仅被加载不会被执行，只有调用require()方法时依赖才会被执行

//多个文件编译输出一个js文件，只要给他们指定相同的chunkName即可

2.import方法

import 'a.js' // a.js被导入到当前引用的文件中，在beforeCreated钩子之前被执行

import(/* webpackChunkName: "chunkName" */ 'a.js').then(() => {

　　// 加载执行完成

}) // /a.js单独编译输出js文件,按需加载，且会在当前文件渲染执行完后才执行(mounted钩子之后)

多个文件编译输出一个js文件，只要给他们指定相同的chunkName即可

三、引入依赖

编译打包规则：如果a依赖被引入到main.js中，则a依赖会被导入到vendor.js中且不会再被重复导入到其他输出的文件中，如果只在将被单独编译输出js的文件中引入，则会被导入到该文件输出的js文件中，如果有多个将被单独编译输出js的文件引用a依赖，则a依赖会被多次导入到这些文件输出的js文件中，如果a依赖较大且被多次引用合并会造成项目臃肿的问题(解决办法：在main.js中引入a文件)

import 'pluginName' // 依赖将被导入到当前引用的文件中

beforeCreate() { // 单独输出该依赖的js文件,按需加载，不会导入到vendor.js或引用的组件中

import('pluginName').then(module => {

this.pluginName = module

})

}

四、引入样式

整个项目的样式会被全部输出到app.css中

同一个组件被重复多次引用的情况下，该组件会共用同一个css样式，且其样式不会被重复编译输出到app.css中

1.样式文件的引入方式：

@import ‘path’ //后缀名可省略，注：import前面必须加@，如果想使用相对src下的路径则在路径前添加~@/,例：‘~@/path’

2.背景图引入方式