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

一、路由组件引入方式：

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.背景图引入方式

background-image: url('path.png') // 注：如果想使用相对src下的路径则在路径前添加~@/,例：‘~@/path.png’

 

五、其他规则

默认小于4kb的静态资源会被内联到文件中(图片会被转化成base64)

但是这个限制是可配置的，相关配置请看：https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E4%BB%8E%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%AF%BC%E5%85%A5

 

六、注意

1.无论哪种引入方式，都要尽量避免使用动态拼接引入文件以免造成不需要打包的文件也被打包进去,影响编译和打包速度和打包后的体积，如果一定要用，那就新增一个文件夹把需要使用动态拼接获取的文件放入该文件夹中，把动态拼接的地址精确到该文件夹所在的位置再进行拼接

 

 

转载于:https://www.cnblogs.com/chenxiangling/p/10476596.html