-
首先推荐大家下载一个webpack的打包分析工具 webpack-bundle-analyzer,这个工具用作分析你项目的打包出来的js包的大小。然后你可以根据这个工具找到需要优化的js包优化。比如打的包js里echarts、momentjs等都很大,我可以对echarts、momentjs采用cdn方式引入
-
在vue-cli3中采用cdn方式引入
2.1 推荐给大家我所用的cdn网址–bootcn,当然,大家也可以选用其他的cdn网址如(cdnjs,unpkg)。个人更推荐使用bootcn是因为这个是国内较好的cdn网址。
2.2 cdn的引入和普通的script引入方式一致。如下图2.3 除了在index.html中引入,还需要将对应的引入写入到vue的配置问件中
2.4 在页面调用中用 import 导入即可。列如(import echarts from “echarts”)
-
除了将第三方文件用cdn方式引入,我们项目中的大图片也需要做一下无损压缩
-
路由采用懒加载(按需引入方式)
component: () => import( /* webpackChunkName: "about" */ './views/login.vue')
-
服务器配置gzip
-
图片懒加载
6.1 安装插件
npm install vue-lazyload --save-dev6.2 在入口文件main.js中引入并使用
6.3 修改图片显示方式为懒加载(将 :src 属性直接改为v-lazy) -
用标签包裹标签缓存
-
图片压缩 在vue.config.js里对webpack配置,采用的是image-webpack-loader
-
剔除 console 和 debugger 代码 在vue.config.js里对webpack配置
10.将elementUI改为按需加载