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入口模板文件中采用传统的
方式引入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

你可能感兴趣的:(vue单页面应用优化-分离静态js库,利用webpack的externals配置)