① 性能测试工具： Pingdom Website Speed Test | Pingdom Tools
②安装webpack-bundle-analyzer安装命令npm i webpack-bundle-analyzer -D
然后在webpack的dev开发模式配置中，引入插件，代码如下：
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
plugins: [
new BundleAnalyzerPlugin()
]
最后执行 npm run build --report 浏览器会自动打开 可以直接查看打包分析
一、路由懒加载
路由组件如果不按需加载的话，就会把所有的组件一次性打包到app.js中，导致首次加载内容过多，官方文档也有提到
component (resolve) {
Require([‘路径’], resolve)
}
改为
component: () => import(‘路径’))
二、后台开启gzip
开启了gzip后js的大小比未开启gzip的js小2/3左右,在浏览器的控制台Content-Encoding一栏会显示gzip，否则没有，或者该文件资源的响应头里显示有Content-Encoding: gzip
前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。
命令行执行：npm i compression-webpack-plugin -D
在webpack的dev开发配置文件中加入如下代码:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
new CompressionWebpackPlugin()
]
三、使用CDN加载资源
好处
（1）加快打包速度，分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。
（2）减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。
在vue项目中，通过npm安装到工程中所有的js,css文件，在编译时都会被打包进vendor.js，浏览器在加载该文件后才开始显示首屏。我们可以使用 CDN 代替这部分不经常变化的公共库。将vue，vue-router，vuex，axios，jquery，underscore等，使用CDN资源引入
- 首先我们在index.html中添加cdn
<link href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
</body>
2. 在vue.config.js中添加webpack配置代码
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
'underscore' : {
commonjs: 'underscore',
amd: 'underscore',
root: '_'
},
'jquery': {
commonjs: 'jQuery',
amd: 'jQuery',
root: '$'
}
},
}
如果想引用一个库，但是又不想让webpack打包，且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals
3. 去除vue.use相关代码
通过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，可以不再使用Vue.use(xxx)
main.js中 注释掉
// import Vue from 'vue'，
// import iView from 'iview';
// import '../theme/index.less';
四、element-ui，echarts等按需加载
1、 Import ElementUI from ‘element-ui’
Vue.use(ElementUI)
改为 import {需要的组件如：Button, Table, Input, Pagination} from ‘element-ui’
Vue.use(Button)
Vue.use(Table)等
2. import * as Echarts from ‘echarts’
改为：import VueEcharts from ‘vue-ecarts/components/echarts.vue’
Import ‘echarts/lib/line’
Import ‘echarts/lib/pie’
Import ‘echarts/lib/bar’
Import ‘echarts/lib/component/title’
Import ‘echarts/lib/component/tooltip’等
2213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
