序

作为一个网站应用，加载速度很重要。加载速度，一是程序的合理安排，比如组件按需加载，二是js、css等资源的异步加载。

在Vue项目中，导入到项目中的所有js和css文件在编译时都会打包到vendor.js中，浏览器只能显示加载文件后的屏。如果导入的库比较多，那么vendor.js文件的量会比较大，影响次打开的体验。

解决方法是将引用的外部js和css文件分开，不编译成vendor.js，而是以资源的形式引用，这样浏览器就可以使用多线程异步加载vendor.js和外部js，加快次打开的速度。

对于外部库文件，可以使用CDN资源或其他服务器资源。

下面以vue、vuex、vue-router的介绍为例描述处理流程。

一、资源介绍

在index.html，添加CDN资源，例如引导：

身体

div id='app'/div

script src=' https://cdn . bootcss.com/vue/2 . 5 . 2/vue . min . js '/script

script src=' https://cdn . bootcss.com/vue-router/3 . 0 . 1/vue-router . min . js '/script

script src=' https://cdn . bootcss.com/vuex/3 . 0 . 1/vuex . min . js '/script

/body

第二，添加配置

在bulid/webpack.base.conf.js文件中，添加external并导入引用的外部模块，如下所示：

module.exports={

入口： {

app :’。/src/main.js '

},

externals:{

vue': 'Vue '，

vue-router': 'VueRouter '，

vuex':'Vuex '

}

注意一点：

格式为‘aaa’:‘bbb’，其中AAA代表要引入的资源名称，BBB代表模块提供的外部引用的名称，由对应的库决定。比如vue就是Vue，vue-router就是VueRouter。

第三，删除原始引用

删除导入，例如：

//从“vue”导入Vue

//从“虚拟路由器”导入路由器

删除Vue.use(XXX)，例如：

//Vue.use(路由器)

试验

重新运行NPM构建，您将看到供应商. js的数量已经减少。通过开发者模式下的Network工具，可以看到vue.js、vuex.js、vendor.js等文件会分别由一个线程加载。而且因为使用了CDN，加载速度比自己的服务器还快。