未优化前
优化步骤
1.按需加载
修改前
修改后
如果你用的组件较多的话,这个步骤会比较繁琐
优化后的文件
vendor文件体积减少了将近300kb
在这里,我使用iview按需加载报错
解决方案:
在webpack.base.conf.js中加入
{
test: /iview.src.*?js$/,
loader: 'babel-loader'
},
然后重新 build
2.异步组件
在官方文档中,是这样介绍异步组件的:
在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。
首先将我们所有的引入组件的位置使用异步组件引入 的方式
修改前
修改后
打包后再次发现vendor文件体积又减少近100kb
在这里打包后运行可能会出现某些js引入404了,我的解决方案是在config文件夹下的webpack配置文件index.js中的assetsPublicPath目录后加 /
最后打包上传到服务器,nginx开启gzip后的文件
再来张优化前的文件对比一下
我还发现还有一个文件特别大就是我的字体文件
我的做法是用woff字体文件替换掉ttf字体文件
网友评论