配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数
文章插图
配置代码压缩
文章插图
配置引用别名
设置插件的按需引入,本文使用的是element-ui，
经过一些基础的配置后,我们来看下目前打包后的效果 。
从下图可以看到,打包出来后最大的包有1.33M 。然后再看下请求,哇,217个请求、首页下载需要3.2M 。
文章插图
文章插图
文章插图
文章插图
好吧，开始折腾
1. 优化scss配置文件的引入
我们在搭建项目的过程中经常性的会将一些scss配置文件抽离出来，例如主题色等，然后在每个需要的组件中引入 。这样会显得很繁琐，我们可以借助sass-loader帮我们进行预处理，
这样我们就不用在每一个页面都进行引入样式，就能直接引用 。
例如我们的样式文件目录下有一个theme.scss，我们可以在vue.config.js中作如下处理
文章插图
通过以上配置,就可以在组件模板中注释以下代码
文章插图
2. 针对请求数进行优化
我们发现请求数增多是因为我们页面预先渲染了其它组件，会在html页面中插入像这样的东西，这该怎么优化呢?
首先我们先看下vue.config.js的官方文档，点击前往 。
官方说明： 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容 。
所以我们添加如下配置
文章插图
3. 公用代码提取，使用cdn加载
对于vue, vuex, vue-router，axios等我们可以利用wenpack的externals参数来配置，这里我们设定只需要在生产环境中才需要使用:
文章插图
接着修改html文件，添加注入代码
文章插图
然后打包重启，我们再来看下目前的变化 。
嗯，真香~从下图可以看到,打包出来后最大的包文件只有775kb 。然后再看下请求,哇,43个请求、首页下载只需要1.4M 。
可以看出，我们这一系列的操作后请求数减少了174个，首页渲染减少了1.8m,真是可喜可贺
文章插图
文章插图
文章插图
文章插图
最后，附上完整的vue-config.js文件
文章插图
文章插图
文章插图
【关于vue-cli 3配置打包优化要点】以上就是我针对打包后做的优化处理，当然还有其它优化点，比如开启gzip压缩，不过这个需要后台服务器支持，所以暂不配置 。
推荐阅读
- 莴笋空心是什么原因
- 大江大河梁思申长大后扮演者
- 杭州亚运会数字火炬是实物吗
- 电脑7系统和10系统区别介绍
- 秋季养生，男女老少看过来
- 四马分肥中的四马指什么
- pr视频导出到桌面教程
- 车祸后对方不赔偿怎么办
- 苹果roomplan是什么 ios16 roomplan有什么用AP功能介绍