记录优化Vue-Cli的那些事1（入门级）

最新推荐文章于 2025-09-08 11:57:20 发布

转载最新推荐文章于 2025-09-08 11:57:20 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c722116518825767633c700

文章标签：

#webpack #javascript #ViewUI

本文分享了H5webApp首页加载速度优化的实践经验，包括升级脚手架版本、CDN引入、图片优化等策略，有效提升了加载速度近10秒。

最近新作的一个H5 webApp的首页加载速度简直慢到发指，所以才打算优化一下，暂时先写一些入门级的优化。

首先先看一下优化前的情况，通过webpack-bundle-analyzer可以很直观的看出来，当前打包情况。在2.x的脚手架中,可以直接通过 npm run build --report来查看，3.x则需要安装插件

1、升级脚手架版本

我之前还是使用的Vue-cli2.x的模板搭建的，我发现升级为3.x的确实能够显著提升速度，估计是因为webpack版本也升级了。

注意图片路径问题以及组件路径问题

之前放到static文件夹下的图片，直接写相对路径即可。例如'../../static/images/1.png'=>'images/1.png',组件路径同理。

路由懒加载写法变化。

之前我都是直接这样写component: resolve => require(['../views/followers/index.vue'], resolve)，现在貌似可以直接import了()=>{import '../views/followers/index.vue'}

2、cdn引入

其实在2.x的脚手架中已经实现了分开打包，app.js主要是业务代码，vendor.js则是第三方库。但是打包出来vendor.js还是过大。如何再拆分vendor还在继续研究中。目前我暂时使用cdn来解决,个人建议使用jsdelivr，速度不错。之后在webpack.base.conf.js中加入如下代码

    externals: {
        'mint-ui': 'MINT',
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'axios': 'axios',
    }
复制代码

PS.需要注意吧cdn引入的js标签放到#app上面
PS.. 注意引用的webpack中填写的名字应是挂载在window对象下的名字

3、优化图片

优先使用字体小图标、纯css,css背景图或精灵图，尽量把图片放到assets目录中(可以直接压缩).

优化后,文件大小也得到有效控制，加载速度也快了差不多10s.
那个swiper.js是由vue-awesome-swiper引入的，还没想好办法去掉它。

展望后续：DLLPlugin的使用，vendor继续拆分，css拆分

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