vue项目优化
在日常的Vue项目开发中,随着业务的日渐复杂,代码量的日益增加,随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本质上来解决这种问题。 这里大概例举几个在项目中实际用到过的方法,优化后的js大概缩小了50%左右,效果还是挺明显的。 1,webpack externals 为什么要配置externals 官方解释:webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。 比如我们会在项目中引用各种第三方的js文件,如 jquery,vue,axios 等,如果我们在打包时排除这些依赖,则可以大大减小文件的大小,提高页面加载速度,配置方法如下: // 在 index.js 中引入资源 <script src="jquery.js"></script> <script src="vuex.js"></script> module.exports = { ... output: { ... }, externals : { jquery: 'jQuery' 'vue': 'Vue', } ... } 这样就剥离了那些不需要改动的依赖模块,换句话