### 第三方庫引用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; ... ```