vuecli開發專案，檔案打包後，appjs/vendorjs檔案過大
專案上線後，瀏覽器第一次載入會特別特別慢，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/[email protected]/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
然後config/index.js中把productionGzip: false，改為true即可
tips: 關閉sourcemap打包的速度可以提升很多
打包後你會發現，檔案的下面會多一個字尾為.gz的檔案，這個就是gzip格式的檔案了，如果有這個檔案，網站在和伺服器連線的時候
會啟用gzip格式檔案，渲染速度就提升上去了。
ps：先寫這麼多，想起來會再補充。