### 第三方库引用CDN - 对于`vue`、`vue-router`、`vuex`、`axios`和`iView`等不经常改动的第三方库，我们不对他们进行打包，通过`CDN`引入，可以减少代码的大小 - 配置`vue.config.js` ``` javascript module.exports = { ... // 部署CDN优化 configureWebpack: { // 排除 externals: { vue: 'Vue', axios: 'axios', 'vue-router': 'VueRouter', vuex: 'Vuex', iview: 'iview' } } ... } ``` - `index.html`中引入CDN地址 ``` html <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iview/3.4.1/iview.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iview/3.4.1/styles/iview.css" /> ``` ### 全站CDN - 由于动态路由导致打包后部分文件较大，因此可将打包生成的较大的js或css文件放置CDN或着带宽较快的服务器上或者第三方平台（如七牛云），更换相应index.html中js链接 ### 开启GZIP - 安装 [compression-webpack-plugin](https://github.com/webpack-contrib/compression-webpack-plugin) 插件 ~~~ npm install compression-webpack-plugin --save-dev ~~~ * 在 vue.config.js 中添加配置 ``` javascipt const CompressionPlugin = require('compression-webpack-plugin') module.exports = { ... configureWebpack: { // GZIP压缩 plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|\.css/, // 匹配文件 threshold: 10240 // 对超过10k文件压缩 }) ] } ... } ``` `npm run build`后能看到生成的 `.gz` 文件，同时服务器也需要配置开启`GZIP` <img src="https://ooo.0o0.ooo/2019/05/01/5cc9b6c04daf1.png" alt="WX20190501-230935@2x.png" title="WX20190501-230935@2x.png" width="400px" /> - Nginx配置 ``` http { ... # 开启GZIP gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 9; ... ```