vue单页面应用优化-分离静态js库，利用webpack的externals配置

因为webpack的默认打包机制会将我们项目中通过npm引入的js库全部打包成一个vendor.js文件里面

毫无疑问这个文件将会非常之大，不利于浏览器加载和浏览器的缓存，因为每次我们更新项目，都会生成一个新的vendor.js文件，浏览器没有缓存，每次都重新加载新的，会导致首次加载极慢

其实像vue.js 、vuex.js 、vue-router.js 这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的vendor.js文件

优化步骤：

1、首先将这些静态库js文件加入到项目的static文件夹里面，例如下面的vue.js文件：

2、在项目根目录的index.html入口模板文件中采用传统的<script></script>

方式引入js库

3、修改build\webpack.base.conf.js 文件，利用externals配置引用库，在module.exports中配置externals

说明一下externals的配置

比如第一个'vue':'Vue' 

key值是：'vue'   (这个值是import from 'vue'时用的名称）

value值是：'Vue' (这个值是通过script方式引入js库后它的全局变量 ，这时vue库的全局变量是首字母大写的 'Vue'

其他同理，element-ui 是import from 'element-ui' 

而通过script方式引入时，它的全局变量名是大写的 'ELEMENT'

4、然后就可以按照以往一样的方式import相应的库了

import Vue from 'vue'

import Router from 'vue-router'

import Vuex from 'vuex'

5、优化后的浏览器加载效果，全部是独立加载各自的js文件，可以利用浏览器的缓存机制

转载于:https://juejin.im/post/5c9303e05188252db5634484