項目上線后，瀏覽器第一次加載會特別特別慢，network中看到vendorjs文件1.9M，不慢才怪。
echarts按需引入后，也有1.1M左右，由於對vue腳手架理解不深，自己扒了大量的文檔，又測
試了很多次，才測試成功，暫時簡單記錄下。
npm run build --report
可以查看文件的大小分布 罪魁禍首是elementui和echarts()
1- app.js存放頁面中的js操作，使用路由的按需加載，可把app.js分隔成多個小的js文件
此時分隔好的js文件要看各頁面中的業務代碼量，其中我這里單獨的一個圖表頁還是很大，
800k左右，又是echarts的鍋。暫時放這。
2- vendorjs中是項目中所有引用的依賴包，即使用的vue、eleui、axios等等插件框架什么
的都在這里邊，怪不得大。
參考文檔，找到以下解決方法：
# cdn引入插件
# 打包時使用Gzip
2.1- cdn引入：
1.index.html文件中引入link/script引入(cdn或ukg鏈接)
2.build/webpack.base.conf.js中添加external配置，webpack打包時會跳過配置中的插件
3. 去除import...from..和use什么的，不去除照樣會打包，其他照常
然后就OK了，我看到的文檔大都是這樣的，不是很清晰哈，那看代碼
index.html (tips: 先后順序、引入的地方)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 7 <title>myapp</title> 8 </head> 9 <body> 10 <div id="app"></div> 11 <!-- built files will be auto injected --> 12 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> 13 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> 14 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 15 <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.min.js"></script> 16 </body> 17 </html>
webpack配置
1 module.exports = { 2 context: path.resolve(__dirname, '../'), 3 entry: { 4 .... 5 }, 6 externals: { 7 // 要引入的資源的名字：該模塊提供給外部引用的名字(由對應的庫自定) 8 'vue': 'Vue', 9 'vue-router': 'VueRouter', 10 'element-ui': 'ELEMENTUI', 11 'echarts': 'echarts' 12 }, 13 output: { 14 ....19 }
main.js中 (tips: 文件中import router from './router' 並不是引入的vueRouter 看路徑)
// import Vue from 'vue' import App from './App' // 這里不是引入的vueRouter import router from './router' // import ElementUI from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' // import echarts from 'echarts' Vue.config.productionTip = false // Vue.use(ElementUI) // Vue.prototype.$echarts = echarts /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
router/index.js文件下 （tips: 腳手架中初始使用的為router 這里要改為VueRouter 原因看external那一步）
1 // import Vue from 'vue' 2 // import router from 'vue-router' // 這里才是引入的路由 3 import HelloWorld from '@/components/HelloWorld' 4 5 // Vue.use(VueRouter) 6 7 export default new VueRouter({ 8 routes: [ 9 { 10 path: '/', 11 name: 'HelloWorld', 12 component: HelloWorld 13 } 14 ] 15 })
這樣配置好之后，開發環境下，項目照常是可以運行的，打包后查看文件大小分布，真香。
補充： vue項目中剛開始用的時候直接全局使用的echarts，即添加原型鏈那一步，頁面中可以直接使用this.$echarts訪問實例
后改用頁面中直接var echarts = require('echarts')按需引入，頁面中訪問可以直接echarts.init()什么的，在使用cdn引入echarts
按需引入那里照常會打包到vendorjs中，因為 require引入使和import作用是一樣的（引入插件），其他區別自行百度。
所以：echarts cdn引入后頁面中直接使用echart.init()等方法即可，添加原型鏈也可以，頁面中還是this.echarts訪問
項目中如果是使用了Eslint插件，會報錯。所以主要還是看頁面能不能正常運行
2.2： Gzip打包
1.下載插件
2.開啟使用插件（cli自帶配置）
下載插件
npm install compression-webpack-plugin
需要查看下webpack.base中的配置中的輸出配置，然后決定下載哪個版本的壓縮插件
output: { path: config.build.assetsRoot, filename: '[name].js', // 看這里 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }
查看官方文檔會發現，最新版本的這個插件的filename換成了assetsname，所以我這里下載的時候后面加上版本號@1.0.0-beta.1
(這里的vuecli為2.x，vuecli3.x的可以直接npm i compression-webpack-plugin)
然后config/index.js中把productionGzip: false，改為true即可
tips: 關閉sourcemap打包的速度可以提升很多
打包后你會發現，文件的下面會多一個后綴為.gz的文件，這個就是gzip格式的文件了，如果有這個文件，網站在和服務器連接的時候
會啟用gzip格式文件，渲染速度就提升上去了。
ps：先寫這么多，想起來會再補充。
19.01.20更 打包之后出現了gzip文件之后並不是就完事了。
線上環境，向服務器請求資源的時候，請求頭里會有這么個東西 Accept-Encoding: gzip, deflate, br（三種編碼方式）
如果服務端配置好了的話，在響應頭中會有Content-Encoding: gzip 這里就說明服務端返回的文件編碼方式為gzip的
也就是說 此處優化完成。